IE와 FIREFOX의 CSS 차이점과 해결책 페이지 1/2_경험 교환
- PHP中文网원래의
- 2016-05-16 12:08:091377검색
CSS는 브라우저 호환성 측면에서 높은 가치를 지니고 있습니다. 일반적으로 IE와 Firefox 간에는 구문 분석에 큰 차이가 있습니다.
높이 파싱
IE: 높이가 정의되지 않은 이미지 콘텐츠를 포함하여 콘텐츠의 높이에 따라 변경됩니다. 높이가 정의되어 있어도 콘텐츠가 높이를 초과하면 실제 높이가 사용됩니다.
Firefox: 높이가 정의되지 않았습니다. 콘텐츠에 이미지 콘텐츠가 포함된 경우 MF의 높이 분석은 인쇄 표준을 기반으로 하며, 높이가 정의되어 있지만 콘텐츠가 실제 콘텐츠와 일치하지 않는 상황이 발생합니다. 높이를 초과하면 콘텐츠가 정의된 높이를 초과하지만 해당 영역에 사용된 스타일은 변경되지 않아 스타일이 잘못 정렬됩니다.
결론: 콘텐츠의 높이를 결정할 수 있을 때 높이를 정의하는 것이 가장 좋습니다. 실제로 높이를 정의할 방법이 없다면 테두리 스타일을 사용하지 않는 것이 가장 좋습니다. 그렇지 않으면 스타일이 확실히 혼란스러울 것입니다. !
img 개체 alt 및 제목 분석
alt: 사진이 존재하지 않거나 로드 오류가 있을 때 프롬프트
title: 사진에 대한 팁 설명.
IE에서 title이 정의되지 않은 경우 alt를 img의 Tip으로 사용할 수도 있지만 MF에서는 둘 다 표준에 정의된 그대로 사용됩니다.
결론: img 객체 정의 시 마지막으로 다양한 브라우저에서 정상적으로 사용할 수 있도록 모든 alt 및 title 객체를 작성하세요
기타 세부 차이점
CSS를 작성할 때 특히 float: left(또는 right )를 사용하세요. Firefox에서는 정상이지만 IE에서는 문제가 있음을 알 수 있습니다. 제한하기 위해 margin: 0 또는 border: 0을 사용해도 도움이 되지 않습니다.
사실 여기에는 또 다른 문제가 있는데, IE가 공백을 처리하는 방법은 Firefox가 이를 무시하지만 IE는 블록 사이의 공백을 처리한다는 것입니다. 즉, p는 중간에 캐리지 리턴이나 공백 없이 p의 끝 바로 뒤에 작성되어야 합니다. 그렇지 않으면 3px 편차 등의 문제가 발생할 수 있으며 그 이유를 찾기가 어렵습니다.
안타깝게도 이 문제가 다시 발생했습니다. 여러 img 태그가 연결되어 있고 float: left가 정의되어 있기를 바랍니다. 그러나 결과는 Firefox에서는 정상이지만 IE에 표시되는 각 img는 3px 떨어져 있습니다. 태그 사이의 공백을 제거했지만 작동하지 않았습니다.
나중의 해결책은 img 외부에 li을 래핑하고 li에 대해 margin: 0을 정의하는 것이었습니다. 이를 통해 IE와 Firefox 간의 디스플레이 편차가 해결되었습니다. 일부 모델에 대한 IE의 해석은 많은 오류를 낳게 되며 반복적인 시도를 통해서만 그 이유를 발견할 수 있습니다.
2. 중첩 DIV: 하위 DIV에 따라 상위 DIV의 높이가 자동으로 변경되지 않는 문제 해결
<div id="parent"> <div id="content"> </div> </div>
콘텐츠가 많을 때 부모는 높이를 100% 또는 자동으로 설정합니다. 자동 늘이기 기능은 다른 브라우저에서 여전히 제대로 작동하지 않습니다. 해결 방법
<div id="parent"> <div id="content"></div> <div style="font: 0px/0px sans-serif;clear: both;display: block"> </div> </div>
이 문제를 해결하려면 레이어 하단에 높이 1의 공간을 만듭니다.
3. CSS DIV 연구 노트
1. 서로 다른 기능을 가진 블록이 동일한 ID/클래스를 사용하는 것을 방지하기 위해 각 블록의 div에는 자체 ID가 있어야 합니다.
2. 각각의 더 큰 블록 div 뒤에는 표시가 옵니다. 시작과 끝
3. 텍스트를 숨기는 또 다른 방법 TEXT-INDENT: -9999px LINE-HEIGHT: 0
4. 병치를 영리하게 처리 두 개의 열:
1 )
오른쪽 열은 P, 너비=44.5%, float=왼쪽
왼쪽 열은 P.first, border-right: #a7a7a7 1px solid, 너비=45%
2)
right 컬럼#right, margin-left:50%
left 컬럼#left, float=left,width=50% border-right:#a7a7a7 1px solid
위 두 메소드의 핵심은 그 중 하나를 float=left로 선택
5. 무작위로 사진 전환:
#random {
BACKGROUND: url(/rotate.php);
}이 방법은 매우 영리합니다.
4. div의 높이 적응에 대해
오늘 Xiaowei는 자신의 페이지에 대한 문제, 즉 div의 높이 적응, 즉 상위 div에 왼쪽을 중첩하는 문제를 해결하도록 도와달라고 요청했습니다. 오른쪽에 있는 두 개의 하위 div는 오른쪽에 있는 하위 div의 내용을 무한히 확장할 수 있고, 상위 div의 높이를 무한히 늘릴 수 있으므로 일반적인 레이아웃 방법을 사용하면 IE에서 올바르게 탐색할 수 있습니다. Mozilla에서 상위 div의 높이는 약 10px로 고정되어 있으며 높이에 적응할 수 없으며 height:auto도 적용되지 않습니다. 어떻게 해야 하나요? 인터넷에 있는 기사를 참조했는데, 적응형 높이를 얻으려면 div 레이어에 float 속성이 있어야 하므로 실험을 시작했습니다. float:left를 사용하면 div가 페이지의 가장 왼쪽으로 이동하게 됩니다. 나는 그 밖에 있다. div의 다른 레이어를 추가하고 위치를 설정하면 float:left 내부가 이동하더라도 위치는 이동되지 않습니다.
xhtml:
=================================== ======================
<div id="container_father"> <div id="container"> <div id="panel"> test<br /> test<br /> test<br /> <!-- id="panel" --> </div> <div id="sidebar"> <ul> <li class="current">预安装检查</li> <li>阅读 PFC 授权协议</li> <li>初始化数据库</li> <li>完成安装</li> </ul> <!-- id="sidebar" --> </div> <!-- id="container" --> </div> </div>
CSS
================ = ==================================
#container_father {
margin-left: auto;
margin-right: auto;
padding: 0px;
width: 750px;
}
#container {
width: 750px;
border: 1px solid #cccccc;
padding: 8px;
margin: 0px;
background-color: #F1F3F5;
float: left;
}5、 深入标准 ~ The IE Doubled Float-Margin Bug(IE双倍浮动边界Bug)
什么发生故障？
一段无错的代码把一个居左浮动(float:left)的元素放置进一个容器盒(box)，并在浮动元素上使用了左边界(margin-left)来令它和容器的左边产生一段距离。看起来相当的简单，对吗？但直至它被在IE/Win中浏览为止，在浏览器中居左浮动元素的边界长度被神秘地翻了一倍！
情况应该如何？
下面的图释展示了一个简单的div(茶色的盒子)包含着一个居左浮动的div(绿色的盒子)。浮动元素有一个100px的左边界，使容器盒与它的左边缘之间产生了一个100px的间隙。到现在为止，一直都还不错。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
/*This last value applies the 100px left margin */
}陈旧的IE“双倍占据”
原样的相同代码被在IE/Win中浏览时以些微不同的方式显示，下面的图释展示了IE/Win在布局上所做的。
这为什么会发生？别问这种傻问题！这就是IE，记得吗？符合标准只是理想的状况，不指望实现，这个简单的事实正验证了。
重点
这个Bug仅当浮动边界和浮动元素的方向相同时出现在浮动元素和容器盒的内边缘之间，在这之后的任意有着相似边界的浮动元素不会呈现双倍边界。只有特定的浮动行的第一个浮动元素会遭遇这个Bug。像居左的情况一样，双倍边界同样神秘地显示在居右的相同方式。
最后，修复办法！
直到现在(04年1月)这个Bug一直被认为是无法修复的，通常用来替代错误的边界的控制方法如：一个不可视浮动元素的左边距，连同一个内嵌的盒子一起，可视的盒子装在不可视浮动元素里；或者使用技巧仅对IE/Win设定边界的1/2值。这办法生效了，但是是混乱的而且搞糟了干净的源代码。不过现在全部结束了。
Steve Clason发现了一个修复办法，描述在他的Guest Demo里，修复了双倍边界和围绕文字缩进Bug。这是一个经典的IE的Bug修复办法，使用一个属性来修复影响不相关属性的Bug。
现在如何来做？
研究它，简单地将{display: inline;}设置给浮动元素就是全部所需做的！是的，听起来太简单了，不是吗？不过这是真的，仅仅一个display的"inline"声明已经能够胜任了。
熟悉规则的人知道浮动元素自动设置为"block"元素，而不管他们之前是什么。就如Steve从W3C里指出：
9.5.1 Positioning the float: the 'float' property "This property specifies whether a box should float to the left, right, or not at all. It may be set for elements that generate boxes that are not absolutely positioned. The values of this property have the following meanings: left The element generates a block box that is floated to the left. Content flows on the right side of the box, starting at the top (subject to the 'clear' property). The 'display' is ignored, unless it has the value 'none'. right Same as 'left', but content flows on the left side of the box, starting at the top. none The box is not floated. "
这说明浮动元素上的{display: inline;}会被忽略，事实上所有的浏览器没有呈现任何改变，包括IE。但是，它不知何故让IE停止将浮动元素的边界翻倍。因而，这个修复办法可以被直接应用，而没有任何繁琐的隐藏方法。如果将来的一款浏览器决定对这个修复办法抱恙，只要把这个修复装入IE独用的Tan Hack里，细节如同IE Three Pixel Text-Jog Demo。
下面是两个使用了前面相同代码的生动演示，第一个照常显示了IE的Bug，下一个对浮动元素使用了"inline"修复。
.floatbox {
float: left;
width: 150px;
height: 150px;
margin: 5px 0 5px 100px;
display: inline;
}以上就是IE和FIREFOX下CSS的区别与解决方法第1/2页_经验交流的内容，更多相关内容请关注PHP中文网（www.php.cn）！