div+css를 모든 브라우저와 호환되게 만드는 팁의 전체 목록

CSS技巧

1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。缺点是要控制内容不要换行? 

2. margin加倍的问题?设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;?例如：?<#div 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; //使浮动忽略}?这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不可控制(内嵌元素);?#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行排列的效果 diplay:table;?

 

4 IE与宽度和高度的问题 IE 不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width和min-height的话，IE下面根本等于没有设置宽度和高度。?比如要设置背景图片，这个宽度是比较重要的。要解决这个问题，可以这样：?#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}?

 

5.页面的最小宽度?min -width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。但IE不认得这个，而它实际上把width当做最小宽度来使。为了让这一命令在IE上也能用，可以把一个

 放到  标签下，然后为div指定一个类, 然后CSS这样设计：?#container{ min-width: 600px; width:expression(document.body.clientWidth < 600? "600px": "auto" );}?第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。它实际上通过Javascript的判断来实现最小宽度。

6.DIV浮动IE文本产生3象素的bug?左边对象浮动，右边采用外补丁的左边距来定位，右边对象内的文本会离左边有3px的间距.?#box{ float:left; width:800px;}?#left{ float:left; width:50%;}?#right{ width:50%;}?*html #left{ margin-right:-3px; //这句是关键}?

?

?

?

?

 

7.IE捉迷藏的问题?当div应用复杂的时候每个栏中又有一些链接，DIV等这个时候容易发生捉迷藏的问题。?有些内容显示不出来，当鼠标选择这个区域是发现内容确实在页面。 解决办法：对#layout使用line-height属性 或者给#layout使用固定高和宽。页面结构尽量简单。?

 

8.float的div闭合;清除浮动;自适应高度;?

 

① 例如：<#div id=”floatA” ><#div id=”floatB” ><#div id=” NOTfloatC” >这里的NOTfloatC并不希望继续平移，而是希望往下排。(其中floatA、floatB的属性已经设置为 float:left;)?这段代码在IE中毫无问题，问题出在FF。原因是NOTfloatC并非float标签，必须将float标签闭合。在 <#div class=”floatB”> <#div class=”NOTfloatC”>之间加上 < #div class=”clear”>这个div一定要注意位置，而且必须与两个具有float属性的div同级，之间不能存在嵌套关系，否则会产生异常。 并且将clear这种样式定义为为如下即可： .clear{ clear:both;}?

 

②作为外部 wrapper 的 div 不要定死高度,为了让高度能自动适应，要在wrapper里面加上overflow:hidden; 当包含float的 box的时候，高度自动适应在IE下无效，这时候应该触发IE的layout私有属性(万恶的IE啊！)用zoom:1;可以做到，这样就达到了兼容。?例如某一个wrapper如下定义：?.colwrapper{ overflow:hidden; zoom:1; margin:5px auto;}?

 

③对于排版,我们用得最多的css描述可能就是float:left.有的时候我们需要在n栏的float div后面做一个统一的背景,譬如:?

?

?

?

?

?比如我们要将page的背景设置成蓝色,以达到所有三栏的背景颜色是蓝色的目的,但是我们会发现随着left center right的向下拉长,而 page居然保存高度不变,问题来了,原因在于page不是float属性,而我们的page由于要居中,不能设置成float,所以我们应该这样解决?

?

?

?

?

?

?

?再嵌入一个float left而宽度是100%的DIV解决之?

 

④万能float 闭合(非常重要!)?关于 clear float 的原理可参见 [How To Clear Floats Without Structural Markup],将以下代码加入Global CSS 中,给需要闭合的div加上class="clearfix" 即可,屡试不爽.?/* Clear Fix */?.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }?.clearfix { display:inline-block; }?/* Hide from IE Mac */?.clearfix {display:block;}?/* End hide from IE Mac */?/* end of clearfix */?或者这样设置：.hackbox{ display:table; //将对象作为块元素级的表格显示}?

 

11.高度不适应?高度不适应是当内层对象的高度发生变化时外层高度不能自动进行调节，特别是当内层对象使用margin 或paddign 时。?例：?#box {background-color:#eee; }?#box p {margin-top: 20px;margin-bottom: 20px; text-align:center; }?

?

p对象中的内容

?

?해결책: P 개체 위와 아래에 두 개의 빈 div 개체를 추가합니다. CSS 코드: .1{height:0px;overflow:hidden;} 또는 DIV에 테두리 속성을 추가합니다.

13. align:middle;

14. 웹 표준에 정의된 ID와 클래스에 차이가 있나요? 1. div id=와 같은 웹 표준에서는 중복 ID가 허용되지 않습니다. "aa"? 두 번 반복하는 것은 허용되지 않으며, 클래스는 이론적으로 무한히 반복될 수 있는 클래스를 정의하므로 여러 참조가 필요한 정의에서 사용할 수 있습니다. 2. 속성 ID의 우선순위가 클래스보다 높습니다. 위의 예제 3은 JS 클라이언트 스크립트 대기에 편리합니다. 페이지의 개체에 대해 스크립트 작업을 수행하려면 해당 개체에 대한 ID를 정의하면 됩니다. 그렇지 않으면 페이지 요소를 탐색하고 지정해야만 찾을 수 있습니다. 이는 ID보다 상대적으로 시간과 자원을 낭비하는 것입니다.

15. 길이를 초과한 후 줄임표로 콘텐츠를 표시하는 방법입니다. 이 방법은 IE 및 OP 브라우저에 적합합니다

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

FF 및 IE?

1. Div 중앙에 문제가 있습니까? margin-left 및 margin-right가 자동으로 설정되어 있으면 div가 이미 중앙에 맞춰져 있습니다. IE는 먼저 본문을 중앙에 맞추도록 설정해야 합니다. 이는 상위 요소 내의 콘텐츠가 중앙에 위치함을 의미합니다. ?

2. 링크의 테두리와 배경(태그)? a 링크는 테두리와 배경색을 추가하고, float: left를 설정해야 합니다. 줄바꿈이 발생하지 않도록 합니다. 메뉴바를 참조하면, 메뉴바의 높이를 설정하는 것은 하단 가장자리 표시가 어긋나는 것을 방지하기 위함입니다. 높이가 설정되지 않은 경우 메뉴바에 공백이 삽입될 수 있습니다.

3. 하이퍼링크 접속 후 호버 스타일이 나타나지 않는 문제 클릭하여 접속한 하이퍼링크 스타일이 더 이상 호버링 및 활성화되지 않는 문제. 이 문제는 CSS 속성의 순서를 변경하는 것입니다. L-V-H-A 코드:

aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa

/* intLen){?strTemp+=strContent.substr(0,intLen)+" ";?strContent=strContent.substr(intLen,strContent.length);?}?strTemp+=" "+strContent;?obj.innerHTML=strTemp; } if(document.getElementById?&&?!document.all)?toBreakWord("ff", 37); /* ]]> */

 

13.为什么IE6下容器的宽度和FF解释不同呢 

让FireFox与IE兼容

문제의 차이점은 컨테이너의 전체 너비에 테두리 너비가 포함되는지 여부입니다. 여기서 IE6은 이를 200PX로 해석하는 반면 FF는 이를 220PX로 해석합니다. 그렇다면 문제의 정확한 원인은 무엇입니까? 컨테이너 상단의 xml을 제거하면 여기에 문제가 있음을 알 수 있습니다. 상단의 문은 IE의 qurks 모드

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

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

????????

세 번째 유형인 CSS 필터 방법, 다음은 외국 사이트에서 번역한 고전입니다. .?다음과 같이 새 CSS 스타일을 만듭니다.?#item {?width: 200px;?height: 200px;? background: red;?}?새 div를 만들고 이전에 정의된 CSS 스타일을 사용합니다.?

여기에 일부 텍스트

?본문 성능에 lang 속성을 추가하세요. 중국어는 zh:??이제 div 요소에 대해 다른 스타일을 정의하세요.?*:lang(en) #item{? background:green !important;?}? 이는 원래 CSS 스타일을 !important로 덮어쓰기 위한 것입니다. :lang 선택기 ie7.0에서는 이를 지원하지 않으므로 이 문장에는 아무런 영향이 없습니다. ie6.0에도 도달했지만 불행하게도 Safari는 이 속성을 지원하지 않으므로 다음 CSS 스타일을 추가해야 합니다: ?#item:empty {?Background: green !important?}?:empty selector is css3 사양 , Safari는 이 사양을 지원하지 않지만 이 요소가 존재하는지 여부에 관계없이 이 요소는 계속 선택되며 이제 IE 버전이 아닌 브라우저에는 녹색이 표시됩니다. ?IE6 및 FF와의 호환성을 위해 이전 버전을 고려해 볼 수 있습니다!중요 개인적으로

을 사용하는 것을 선호합니다.

성명：

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.