CSS 브라우저 비호환 원인 분석-CSS 튜토리얼-php.cn

CSS 브라우저 비호환 원인 분석

不言

풀어 주다： 2018-06-28 11:45:34

원래의

2323명이 탐색했습니다.

이 글은 주로 CSS 브라우저 비호환성 원인에 대한 분석을 소개합니다. 이제는 모든 사람과 공유합니다. 도움이 필요한 친구들이 참고할 수 있습니다.

우리는 브라우저의 비호환성을 싫어할 때가 많습니다. 하지만 더 중요한 것은 근본 원인을 추적하고 유사한 비호환성이 다시 발생하지 않도록 방지하는 것입니다.

몇 가지 지침을 제공하기 위해 몇 가지 HTML 코딩 요소를 요약하고 싶습니다.
1. 텍스트 자체의 크기가 호환되지 않습니다. 글꼴 크기가 14px인 동일한 Song 스타일 텍스트는 브라우저에 따라 서로 다른 공간을 차지합니다. IE에서는 실제로 높이가 16px, 하단 여백이 3px를 차지합니다. FF에서는 실제로 높이가 17px, 상단이 1px를 차지합니다. 하단에 1px, 흰색 3px, 오페라에서는 더욱 달라집니다. 해결책: 텍스트의 줄 높이를 설정하십시오. 모든 텍스트에 기본 줄 높이 값이 있는지 확인하세요. 이것은 중요합니다. 우리는 1px의 높이 차이를 용납할 수 없습니다.

2. 컨테이너 높이는 ff로 제한됩니다. 즉, 컨테이너가 높이를 정의한 후 컨테이너 테두리의 모양이 결정되고 내용에 따라 확장되지 않습니다. 콘텐츠이며 높이 제한이 유효하지 않습니다. 따라서 컨테이너의 높이를 쉽게 정의하지 마십시오.

3. 콘텐츠가 수평으로 깨지는 문제에 대해서도 논의했습니다. float 컨테이너에 정의된 너비가 없으면 ff 아래의 콘텐츠는 컨테이너의 너비를 최대한 늘리고, 즉, 아래에서는 콘텐츠 래핑에 우선순위가 부여됩니다. 따라서 내용물이 터질 수 있는 부동 컨테이너는 너비를 정의해야 합니다.

작은 실험: 관심이 있으시면 이 실험을 살펴보세요. 다양한 브라우저에서 다음 코드를 각각 테스트해 보세요.

a.<p style=”border:1px solid red;height:10px”></p> b.<p style=”border:1px solid red;width:10px”></p>

로그인 후 복사

c.<p style=”border:1px solid red;float:left”></p> d.<p style=”border:1px solid red;overflow:hidden”></p>

로그인 후 복사

위 코드는 브라우저마다 다릅니다. 이 실험은 작은 높이 값 p,

, 작은 높이 값을 사용하는 것에서 시작되었습니다. overflow:hidden과 함께 사용해야 합니다. 이 실험은 단지 재미를 위한 것입니다. 제가 지적하고 싶은 것은 브라우저마다 컨테이너 경계에 대한 해석이 매우 다르며 컨테이너 콘텐츠의 영향이 다양하다는 것입니다.

4. ff 아래의 플로트를 지우지 않으면 작동하지 않습니다.

모든 사람의 오해를 바로잡기 위해, 비호환성에 직면했을 때 ff가 나쁘다고 말하는 것은 잘못된 것입니다. 사실, 우리를 당황하게 만드는 것은 ie의 이상한 행동일 때가 더 많습니다. 다음은 ie6의 다양한 악행을 나열합니다.

5.가장 싫어하는 이중마진 버그. IE6에서 부동 컨테이너에 대해 margin-left 또는 margin-right를 정의하면 실제 효과는 값의 두 배가 됩니다. 해결책은 부동 컨테이너에 대해 display:inline을 정의하는 것입니다.

6.mirrormargin 버그, 외부 요소에 float 요소가 있을 때 외부 요소가 margin-top:14px를 정의하면 margin-bottom:14px가 자동으로 생성됩니다. IE6의 특징인 패딩에서도 유사한 문제가 발생합니다. 이러한 유형의 버그가 발생하는 상황은 이러한 종류의 발생 조건보다 훨씬 더 복잡하며 체계적으로 분류되지 않았습니다. 해결책: 외부 요소에 테두리 또는 부동 소수점을 설정하십시오.

확장: ff 및 ie 아래 컨테이너의 margin-bottom 및 padding-bottom에 대한 설명이 때때로 일치하지 않는데, 이는 이와 관련된 것으로 보입니다.

7. 공간적 제약으로 삼키는 현상에 대해서는 자세히 설명하지 않겠습니다. 아직 IE6인데 위쪽 p와 아래쪽 p가 2개 있는데, 배경이 없는 아래쪽 p에도 배경이 있는 것으로 나타났습니다. 위의 배경 삼키는 현상에 맞춰 스크롤 시 테두리가 누락되는 현상도 있습니다. 해결 방법: Zoom:1을 사용하세요. 이 확대/축소는 ie6 버그를 해결하기 위해 특별히 설계된 것 같습니다.

8. 댓글도 버그를 일으킬 수 있습니다~~ "An extra pig." 이것은 이전 사람들이 이 버그를 요약하기 위해 사용한 카피입니다. IE6에서는 pig라는 단어가 두 번 나타납니다. 댓글 수에 따라 중복 콘텐츠의 양이 달라집니다. 해결 방법: " picRotate start " 메소드를 사용하여 댓글을 작성하세요.

Riga float

이것은 일반적이고 어려운 호환성 문제이므로 모두가 주의해 주시길 바랍니다. 설명은 약간 이해가 되지만 IE6에서의 설명은 문제의 복잡성으로 인해 혼란을 야기할 수 있습니다. 이 문제에 대해서는 별도의 기사에서 다룰 것입니다. "ul 사용 경험" 기사에 관련 결과가 있지만, 문제를 해결하는 과정은 나와 있지 않습니다.

10. "float:left;display:inline"을 사용하는 ul의 이상한 동작. 이 CSS는 ie6의 이중 여백 버그에 대한 응답으로 display:inline에 추가된 것을 볼 수 있습니다. 이는 내 CSS 시스템의 중요한 부분이기도 합니다. "Using Experience of ul" 기사에 설명되어 있습니다. 그리고 이 CSS를 ul에서 사용하면 당신을 비참하게 만들 것입니다. 지금은 그게 다입니다. 여기서는 더 이상 말할 수 없습니다.

11. img 아래에 공백이 있습니다.

<p> 
<img src=”” src=”” /> 
</p>

로그인 후 복사

p의 테두리를 열면 컨테이너 하단이 가깝지 않은 것을 알 수 있습니다. img 뒤의 공백 문자로 인해 발생합니다. Elimination은 이렇게 작성해야 합니다.

<p> 
<img src=”” src=”” /></p>

로그인 후 복사

다음 두 태그는 서로 옆에 있어야 합니다. 이 버그는 ie7에도 여전히 존재합니다. 해결책: 디스플레이:블록을 img로 설정하십시오.

12. 줄 높이를 잃습니다.

Text

불행하게도 IE6에서는 한 줄의 텍스트에 대한 줄 높이 효과가 사라집니다. . . , 그 이유는 inline-block 요소와 inline 요소가 함께 작성되기 때문입니다. 해결 방법: img와 텍스트를 모두 부동으로 만듭니다.

引申：大家知道img 的align 有 text-top，middle，absmiddle啊什么的，你可以尝试去调整img 和文字让他们在ie和ff下能一致，你会发现怎么调都不会让你满意。索性让img 和文字都 float起来，用margin 调整。

13.链接的hover状态。a:hover img{width:300px} 我们想让鼠标hover时，链接里包含的图片宽度变化，可惜在ie6下无效，ie7、ff下有效。

14.非链接的hover状态。p:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。

15.block化的a链接，其内套absolute层，absolute层内放置img，ie下，鼠标点击img不会有链接效果，ff、op下正常。

想不出来了，以后想到再加吧。上面的诸多问题如果你掌握了其中奥妙，90%的不兼容问题不需要另起css hack的。

16.无法彻底清除的float。如果让ul下的li具有了float属性，如何clear浮动的li呢？

或者

class=”c”>

或者

class=”c”>

或者

class=”c”>

或者上述的组合？这个问题，我无法给出解答。下面有个例子与此相关

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> 
<style type=text/css> 
.c{clear:both;overflow:hidden;+overflow:visible} 
.bd{border:1px solid red} 
ul.ex{list-style:none;} 
ul.ex li{float:left;border:1px solid green;} 
</style> 
<ul class=ex> 
<li>sfsdfsfdf</li> 
<li>sfsdfsfdf</li> 
</ul> 
<p class=c></p> 
<p class=bd style=margin-top:19px>sfsdfsfdf</p>

로그인 후 복사

请在ie下测试，仅仅将 margin-top:19px 改为margin-top:20px 你发现什么了？要素：doctype必须有，ie6、ie7下margin-top:19px还好好的，margin-top:20px 就出问题了，无法解释。。。大家还可以将 clear 层换不同的位置测试。

解决方案：给ul 属性zoom:1 （给li 加zoom:1 没用）

引申：clear层应该单独使用。也许你为了节省代码把clear属性直接放到下面的一个内容层，这样有问题，不仅仅是ff和op下失去margin效果，ie下某些margin值也会失效

17.ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative无效。解决方案：给overflow:hidden加position:relative或者position:absolute。另，ie6支持overflow-x或者overflow-y的特性，ie7、ff不支持。

18.ie6下严重的bug，float元素如没定义宽度，内部如有p定义了height或zoom:1，这个p就会占满一整行，即使你给了宽度。float元素如果作为布局用或复杂的容器，都要给个宽度的。

19.ie6下的bug，绝对定位的p下包含相对定位的p，如果给内层相对定位的p高度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑大。解决方案给内层相对层float属性。

20.ie6下的bug，内有的情况下，position:relative层下的float层内文字无法选中。这个bug迫使我修公用样式库。

21.终于来了个ff的缺点。width:100%这个东西在ie里用很方便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索至浮动层结束，如此，只能给中间的所有浮动层加width:100%才行，累啊。opera这点倒学乖了跟了ie。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！