CSS 브라우저 호환성 문제를 해결하는 방법 요약

CSS와 브라우저의 호환성은 때로 사람들에게 골칫거리가 됩니다. 아마도 기술과 원리를 이해하면 어렵지 않을 것입니다. 인터넷에서 IE7, 6 및 Fireofx의 호환성 방법을 정리했습니다. web2.0으로 전환하려면 xhtml 형식으로 코드를 작성해 보시기 바랍니다. DOCTYPE은 W3C 표준으로 DOCTYPE을 추가해야 합니다.

1.p 수직 중앙 정렬 문제 Vertical-align:middle; 줄 간격을 전체 p line-height:200px와 동일한 높이로 늘립니다. 그런 다음 텍스트를 삽입하면 수직 중앙에 정렬됩니다. 단점은 줄 바꿈 없이 콘텐츠를 제어해야 한다는 것입니다.

2. 여백이 두 배로 늘어나는 문제. p를 부동으로 설정하면 IE에서 설정된 여백이 두 배가 됩니다. ie6에 존재하는 버그입니다. 해결책은 이 p에 display:inline;을 추가하는 것입니다. 예: 8a5cf3dcbde2cddfb719b2644eb32a80 해당 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에서 작동하도록 하려면 6c04bd5ca3fcae76e30b72ad730ca86d 태그 아래에 e388a4556c0f65e1904146cc1a846bee를 넣은 다음 p에 대한 클래스를 지정한 다음 다음과 같이 CSS를 디자인할 수 있습니다. #container{ min-width: 600px; width :expression(document.body.clientWidth a1e9a29dfe2f08c01eb8d73fe59e7cb0 e749d076ae8f72fd7d46c434c5412e8494b3e26ee717c64999d7867364b1b4a394b3e26ee717c64999d7867364b1b4a3
7.p 적용 시 IE 숨바꼭질 문제 복잡할 때 각 열마다 링크가 몇 개 있는데 이때 숨바꼭질 문제가 쉽게 발생할 수 있습니다. 일부 콘텐츠를 표시할 수 없습니다. 이 영역을 마우스로 선택하면 해당 콘텐츠가 실제로 페이지에 있는 것으로 확인됩니다. 해결책: #layout에 line-height 속성을 사용하거나 #layout에 고정 높이 및 너비를 사용하십시오. 페이지 구조를 최대한 단순하게 유지하세요.

8. float의 p 클로저; 적응형 높이

① 예: e874acc1d87dcc94f4e38d2310d52545ce89d2e8d7b032654f6c53c9d59b5506d9ffad644975c9778ba7bdc94ca6fec7여기서 NOTfloatC는 계속 번역을 원하지 않고 아래쪽으로 이동하기를 원합니다. (floatA 및 floatB의 속성은 float:left;로 설정되었습니다.) 이 코드는 IE에서는 문제가 없지만 FF에서는 문제가 있습니다. 그 이유는 NOTfloatC가 부동 레이블이 아니므로 부동 레이블을 닫아야 하기 때문입니다. 163393efcf02c2676818233c41eb2e65 사이에 76e3c42bfcaf55e241356211d1e51974를 추가하세요. 두 가지와 일치해야 합니다. float 속성을 가진 p 형제 사이에는 중첩 관계가 있을 수 없습니다. 그렇지 않으면 예외가 발생합니다. 그리고 다음과 같이 클리어 스타일을 정의합니다: .clear{clear:both;}

② 외부 래퍼로서 p의 높이를 설정하지 마세요. 높이가 자동으로 조정되도록 하려면 래퍼에 Overflow:hidden을 추가하세요. ; 부동 소수점이 포함된 상자가 사용되면 IE에서는 높이 자동 적응이 유효하지 않습니다. 이때 IE의 레이아웃 개인 속성이 트리거되어야 합니다(사악한 IE!). 호환성을 달성하려면 Zoom:1을 사용할 수 있습니다. 예를 들어 래퍼는 다음과 같이 정의됩니다. .colwrapper{ Overflow:hidden; Zoom:1; margin:5px auto;}

③ 조판을 위해 우리가 가장 많이 사용하는 CSS 설명은 아마도 float:left일 것입니다. 때로는 n열의 float p 뒤에 통일된 배경을 만들어야 합니다. 예: 75598ae0912b4c03dd28a6ab100b9481 left”94b3e26ee717c64999d7867364b1b4a3 20db94b448ea651e5c8368d0790056d894b3e26ee717c64999d7867364b1b4a3

11. 높이 비적응 높이 비적응은 내부 개체의 높이가 변경될 때 외부 레이어의 높이이며, 특히 내부 개체가 여백이나 패딩을 사용하는 경우 자동으로 조정될 수 없습니다. 예: #box { } #box p {margin-top: 20px;margin-bottom: 20px; text-align:center; } 753396aab491b64ee4772d02f5086612

: P 개체 CSS 코드 위와 아래에 두 개의 빈 p 개체를 추가하거나 p에 테두리 속성을 추가합니다.

12. IE6에서 이미지 아래에 공백이 있는 이유는 무엇입니까? 이 버그를 해결하는 방법은 여러 가지가 있습니다. html의 레이아웃을 변경하거나 img를 display:block으로 설정하거나 수직 정렬 속성을 수직으로 설정할 수 있습니다. -align:top | middle |text-bottom을 해결할 수 있습니다.

13.vertical-align:middle;을 사용하여 텍스트 및 텍스트 입력 상자를 정렬하는 방법! -- input { width:200px; height:30px; border:1px Vertical-align:middle; --> 531ac245ce3e4fe3d50054a55f265927

14. ? 1. 웹 표준에서는 중복이 허용되지 않습니다. p id="aa" 와 같은 ID는 두 번 반복될 수 없지만 클래스는 이론적으로 무한 반복이 가능한 클래스를 정의하므로 여러 참조가 필요한 정의는 사용할 수 있습니다. 2. 속성 ID의 우선순위는 위의 예 3을 참조하세요. JS와 같은 클라이언트 측 스크립트에 대해 정의하면 됩니다. 그렇지 않으면 페이지 요소를 탐색하여 추가할 수 있습니다. 이를 찾기 위해 특정 속성을 지정하는 것은 상대적으로 시간과 리소스를 낭비하는 것이며 ID를 표시하는 방법보다 훨씬 덜 간단합니다. 이 방법은 IE 및 OP 브라우저에 적합합니다b246e0e746e032a1c95693095e268cb4 < ;/style>

16. IE는 왜 웹 표준에서 스크롤 막대 색상을 설정할 수 없나요? 본문을 html

<!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>

17. 높이가 약 1px인 컨테이너를 정의할 수 없는 이유는 무엇입니까? IE6의 이 문제는 기본 줄 높이 때문입니다. 이로 인해 다음과 같은 해결 방법이 있습니다. 숨겨진 | 확대/축소:0.08 | line-height:1px

18. FLASH 위에 레이어를 표시하는 방법은 무엇입니까? 해결책은 FLASH name="wmode" value="transparent" />

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插入 的方法来解决 9a6c6593cd224a767d2b5172bc71b53a 62bd2fb5bf4db34fc65b81c061e0e4ce 531ac245ce3e4fe3d50054a55f265927 4df436957366b6ed1040126fa5a89c56aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa94b3e26ee717c64999d7867364b1b4a3 0d20824b412c474fd1dfb16e6b8dbc6d /* 820e02f229f4e29afaa637c15b28fe5dintLen){ strTemp+=strContent.substr(0,intLen)+" "; strContent=strContent.substr(intLen,strContent.length); } strTemp+=" "+strContent; obj.innerHTML=strTemp; } if(document.getElementById && !document.all) toBreakWord("ff", 37); /* ]]> */ 283ead764fe6cb05d142a40edcf84695

13.IE6에서 컨테이너의 너비가 FF의 너비와 다른 이유는 무엇입니까?978bff6089d81b13489e76a6372899cd 0137259d31f4115748f6af98e199bf5a 952d3f16c00ff73ed0ba309a7c7449f0 080b747a20f9163200dd0a7d304ba388 8f5f5e1ce74c78894b73798dd2a5f985 ="alert(this.offsetWidth)">FireFox를 IE와 호환되게 만드세요94b3e26ee717c64999d7867364b1b4a3 문제의 차이점은 테두리 너비가 컨테이너의 전체 너비에 포함되는지 여부입니다. 여기서 IE6은 이를 200PX로 해석합니다. FF는 220PX로 해석되는데, 문제의 원인은 정확히 무엇입니까? 컨테이너 상단의 xml을 제거하면 원래 문제가 여기에 있음을 알 수 있습니다. 상단의 문은 IE의 qurks 모드를 트리거합니다. qurks 모드 및 표준 모드에 대한 관련 내용은 다음을 참조하세요. www.microsoft.com/china /msdn/library/webservices/asp.net/ASPNETusStan.mspx?mfr=true

IE6, IE7, FF IE7.0이 출시되었으며 CSS 지원에 새로운 문제가 있습니다. 브라우저가 많아지고 웹 페이지의 호환성이 점점 나빠지고 있습니다. IE7.0의 호환성 문제를 해결하기 위해 다음과 같은 글을 발견했습니다: 지금은 ie6과 6의 경우 주로 !important를 사용합니다. firefox 테스트는 정상적으로 표시될 수 있지만 ie7에서는 !important를 올바르게 해석할 수 있으므로 페이지가 필요에 따라 표시되지 않습니다! 다음은 세 가지 브라우저의 호환성 모음입니다.

첫 번째는 CSS HACK 방법입니다. height:20px /*For Firefox*/ *height:25px /*For IE7 & IE6*/ _height:20px; IE6*의 경우/ 순서에 주의하세요. 이것도 CSS HACK이지만 위와 같이 간단하지는 않습니다. #example { color: #333; } /* Moz */ * html #example { color: #666; /* IE6 */ *+html #example { color: #999 } /* IE7 */

< ;!--다른 브라우저--> 1325033f74410c73959088ed41585e69 e00c1db69e82f4be8ff8f60bf6166655 e42eef118e9746b78eaea3d8f2eb58e2 1b771f47d72d900ba74308aee59557f0 lte IE 6]> 8cc49260c87888c13dbc842cc5cfff04 11d0397e7d0ff074fa7e4e07230185cb endif]-->

세 번째 방법은 CSS 필터 방법입니다. 다음은 외국 사이트의 고전적인 번역입니다. . 다음과 같이 새 CSS 스타일을 만듭니다. #item { width: 200px; height: 200px; background: red } 이전에 정의한 CSS 스타일을 사용합니다. 8c6eab477ea811b2aef0ea66ce72bc0d ; /p> 여기에 lang 속성을 추가합니다. 중국어는 zh: af4276b4335489c3ca10bfad9c6fbf29 이제 p 요소에 대해 다른 스타일을 정의합니다. *:lang(en) #item{ background:green !important; } 이는 !important로 원본 CSS 스타일을 덮어쓰기 위한 것입니다. IE7.0에서는 :lang 선택기가 지원되지 않으므로 IE6.0에서도 동일한 효과가 나타납니다. 불행히도 Safari는 이 속성을 지원하지 않으므로 다음 CSS 스타일을 추가해야 합니다. #item:empty { background: green !important } : 빈 선택기는 Safari 사양입니다. 이 사양을 지원하지 않으면 이 요소가 존재하는지 여부에 관계없이 이 요소를 선택하면 이제 IE를 제외한 모든 브라우저에서 녹색으로 표시됩니다. IE6 및 FF와의 호환성을 위해 이전 !important를 고려할 수 있습니다. 개인적으로는 사용하는 것을 선호합니다

위 내용은 CSS 브라우저 호환성 문제를 해결하는 방법 요약의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!