CSS와 브라우저의 호환성은 때로 사람들에게 골칫거리가 됩니다. 아마도 기술과 원리를 이해하면 어렵지 않을 것입니다. 인터넷에서 IE7, 6 및 Fireofx의 호환성 방법을 정리했습니다. web2.0으로 전환하려면 xhtml 형식으로 코드를 작성해 보시기 바랍니다. DOCTYPE은 W3C 표준으로 DOCTYPE을 추가해야 합니다. 1.p 수직 중앙 정렬 문제 Vertical-align:middle; 줄 간격을 전체 p line-height:200px와 동일한 높이로 늘립니다. 그런 다음 텍스트를 삽입하면 수직 중앙에 정렬됩니다. 단점은 줄 바꿈 없이 콘텐츠를 제어해야 한다는 것입니다. 를 넣은 다음 p에 대한 클래스를 지정한 다음 다음과 같이 CSS를 디자인할 수 있습니다. #container{ min-width: 600px; width :expression(document.body.clientWidth < 600? "600px": "auto" );} 첫 번째 최소 너비는 정상이지만 2행의 너비는 IE에서만 인식되는 Javascript를 사용합니다. HTML 문서를 덜 형식적으로 만듭니다. 실제로 Javascript 판단을 통해 최소 너비를 구현합니다.
2. 여백이 두 배로 늘어나는 문제. p를 부동으로 설정하면 IE에서 설정된 여백이 두 배가 됩니다. ie6에 존재하는 버그입니다. 해결책은 이 p에 display:inline;을 추가하는 것입니다. 예: <#p id="imfloat"> 해당 CSS는 #IamFloat{ float:left; margin:5px;/*IE에서 이해됩니다. 10px*/ display:inline;/*IE에서는 5px*/}로 이해됩니다.
3. 부동 IE에 의해 생성된 이중 거리 #box{ float:left width:100px; margin:0 0 0 100px; //이 경우 IE는 200px의 거리를 생성합니다. display:inline; //ignore float} 다음은 두 요소인 block과 inline에 대한 자세한 설명입니다. 블록 요소의 특징은 항상 새 줄에서 시작한다는 것입니다. 높이, 너비, 줄 높이 및 측면을 제어할 수 있습니다(블록 요소). 인라인 요소의 특징은 다른 요소와 같은 줄에 있으며 제어할 수 없다는 것입니다(인라인 요소). :block; //인라인 요소에 대한 블록 요소 표시로 시뮬레이션 가능 :inline; //동일한 행에 정렬하는 효과 달성 diplay:table
4 IE와 너비 및 높이의 문제 IE가 정의를 인식하지 못합니다. min-이지만 실제로는 min make의 경우처럼 일반적인 너비와 높이를 처리합니다. 이것이 큰 문제가 됩니다. 너비와 높이만 사용하면 이 두 값은 일반 브라우저에서 변경되지 않습니다. min-width와 min-height만 사용하면 너비와 높이가 전혀 설정되지 않습니다. IE에서. 예를 들어 배경 이미지를 설정하려는 경우 이 너비가 더 중요합니다. 이 문제를 해결하려면 다음을 수행하세요. #box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: min-height: 35px;}
5. 페이지 min -width의 최소 너비는 매우 편리한 CSS 명령으로, 레이아웃이 항상 정확하도록 요소의 최소 너비가 특정 너비보다 작을 수 없도록 지정할 수 있습니다. 하지만 IE는 이를 인식하지 못하고 실제로 너비를 최소 너비로 처리합니다. 이 명령이 IE에서 작동하도록 하려면
6.p 부동 IE 텍스트는 3픽셀 버그를 생성하며, 오른쪽은 외부 패치의 왼쪽 여백을 사용하여 배치됩니다. 오른쪽 개체의 텍스트는 왼쪽에서 3픽셀 떨어져 있습니다. #box{ float:left; 너비: 800px;} #left{ float:left; 너비:50%;} #right{ 너비:50%;} *html #left{ margin-right:-3px; 키입니다}
left”
세 열의 배경색을 모두 파란색으로 만들기 위해 페이지 배경을 파란색으로 설정했지만 왼쪽 중앙 오른쪽이 아래쪽으로 늘어나면 페이지의 높이가 변경되지 않고 그대로 저장됩니다. 이유 문제는 페이지가 부동 속성이 아니고 페이지를 중앙에 배치해야 하기 때문에 부동으로 설정할 수 없다는 것입니다. 따라서 다음과 같이 해결해야 합니다.
" style="float:left;width :100%”>
”right”>
그런 다음 문제를 해결하기 위해 너비가 100%인 p를 왼쪽에 삽입합니다. float를 클리어하려면 [구조적 마크업 없이 float를 지우는 방법]을 참고하여 Global CSS에 다음 코드를 추가하고 닫아야 하는 p에 class="clearfix"를 추가하면 됩니다. /* Clear Fix */ .clearfix:after { content:"."; display:block; height:both; visible:hidden; } .clearfix { display:inline-block; } /* IE Mac에서 숨기기 :block;} /* IE Mac에서 숨기기 종료 */ /* Clearfix 끝 */ 또는 다음과 같이 설정합니다: .hackbox{ display:table; //블록 요소 수준에서 객체를 테이블로 표시}: P 개체 CSS 코드 위와 아래에 두 개의 빈 p 개체를 추가하거나 p에 테두리 속성을 추가합니다.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
<!-- html {
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#fff;
scrollbar-shadow-color:#eeeeee;
scrollbar-3dlight-color:#eeeeee;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-darkshadow-color:#fff; } -->
</style>19. 브라우저에서 레이어를 수직으로 중앙에 배치하는 방법 여기서는 백분율 절대 위치 지정을 사용하고 음수 값의 크기는 자체 너비를 2로 나눕니다. FF 및 IE
1. margin-left 및 margin-right를 자동으로 설정하면 p가 가운데에 맞춰집니다. IE는 먼저 부모 요소 algin에서 본문을 가운데로 설정해야 합니다. : center; 이는 상위 요소 내의 콘텐츠가 중앙에 있음을 의미합니다.
2. 링크(태그)의 테두리와 배경을 추가하려면 줄 바꿈이 없도록 display: block 및 float: left를 설정해야 합니다. 메뉴바를 참조하면, 메뉴바의 높이를 설정하는 것은 하단 가장자리 표시가 어긋나는 것을 방지하기 위함입니다. 높이가 설정되지 않은 경우 메뉴바에 공백이 삽입될 수 있습니다.
3. 하이퍼링크를 방문한 후 호버 스타일이 나타나지 않는 문제. 클릭하여 방문한 하이퍼링크 스타일이 더 이상 호버링 및 활성화되지 않는 문제를 해결하려면 이 문제를 해결해야 합니다. CSS 속성: L-V-H-A 코드:
<style type="text/css">
<!-- a:link {} a:visited {} a:hover {} a:active {} -->
</style>4. 游标手指cursor cursor: pointer 可以同时在 IE FF 中显示游标手指状， hand 仅 IE 可以
5.UL的padding与margin ul标签在FF中默认是有padding值的,而在IE中只有margin默认有值,所以先定义 ul{margin:0;padding:0;}就能解决大部分问题
6. FORM标签 这个标签在IE中,将会自动margin一些边距,而在FF中margin则是0,因此,如果想显示一致,所以最好在css中指定margin和 padding,针对上面两个问题,我的css中一般首先都使用这样的样式ul,form{margin:0;padding:0;}给定义死了,所以后 面就不会为这个头疼了.
7. BOX模型解释不一致问题 在FF和IE 中的BOX模型解释不一致导致相差2px解决方法：p{margin:30px!important;margin:28px;} 注意这两个 margin的顺序一定不能写反， important这个属性IE不能识别，但别的浏览器可以识别。所以在IE下其实解释成这样： p {maring:30px;margin:28px}重复定义的话按照最后一个来执行，所以不可以只写margin:xx px!important; #box{ width:600px; //for ie6.0- w\idth:500px; //for ff+ie6.0} #box{ width:600px!important //for ff width:600px; //for ff+ie6.0 width /**/:500px; //for ie6.0-}
8.属性选择器(这个不能算是兼容,是隐藏css的一个bug) p[id]{}p[id]{} 这个对于IE6.0和IE6.0以下的版本都隐藏,FF和OPera作用.属性选择器和子选择器还是有区别的,子选择器的范围从形式来说缩小了,属性选择 器的范围比较大,如p[id]中,所有p标签中有id的都是同样式的.
9.最狠的手段 - !important; 如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略.如下 .tabd1{ background:url(/res/images/up/tab1.gif) no-repeat 0px 0px !important; /*Style for FF*/ background:url(/res/images/up/tab1.gif) no-repeat 1px 0px; /* Style for IE */} 值得注意的是，一定要将xxxx !important 这句放置在另一句之上，上面已经提过
10.IE,FF的默认值问题 或许你一直在抱怨为什么要专门为IE和FF写不同的CSS，为什么IE这样让人头疼，然后一边写css，一边咒骂那个可恶的M$ IE.其实对于css的标准支持方面，IE并没有我们想象的那么可恶，关键在于IE和FF的默认值不一样而已，掌握了这个技巧，你会发现写出兼容FF和 IE的css并不是那么困难，或许对于简单的css，你完全可以不用”!important”这个东西了。 我们都知道，浏览器在显示网页的时候，都会根据网页的 css样式表来决定如何显示，但是我们在样式表中未必会将所有的元素都进行了具体的描述，当然也没有必要那么做，所以对于那些没有描述的属性，浏览器将采 用内置默认的方式来进行显示，譬如文字，如果你没有在css中指定颜色，那么浏览器将采用黑色或者系统颜色来显示，p或者其他元素的背景，如果在 css中没有被指定，浏览器则将其设置为白色或者透明，等等其他未定义的样式均如此。所以有很多东西出现FF和IE显示不一样的根本原因在于它们的默认显 示不一样，而这个默认样式该如何显示我知道在w3中有没有对应的标准来进行规定，因此对于这点也就别去怪罪IE了。
11.为什么FF下文本无法撑开容器的高度标准浏览器中固定高度值的容器是不会象IE6里那样被撑开的,那我又想固定高度,又想能被撑开需要怎样 设置呢？办法就是去掉height设置min- height:200px; 这里为了照顾不认识min-height的IE6 可以这样定义: { height:auto!important; height:200px; min-height:200px; }
12.FireFox下如何使连续长字段自动换行 众所周知IE中直接使用 word-wrap:break-word 就可以了, FF中我们使用JS插入
的方法来解决
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa