CSS兼容性问题总结及解决⽅法
css兼容问题
兼容问题
1.⽂字本⾝的⼤⼩不兼容。同样是font-size:14px的宋体⽂字，在不同浏览器下占的空间是不⼀样的，ie下实际占⾼16px，下留⽩3px，ff下实际占⾼17px，上留⽩1px，下留⽩3px。解决⽅案：给⽂字设定 line-height 。确保所有⽂字都有默认的 line-height 值。
2.ff下容器⾼度限定.即容器定义了height之后，容器边框的外形就确定了，不会被内容撑⼤，⽽ie下是会被内容撑⼤，⾼度限定失效。所以不要轻易给容器定义height。
3. 横向上的内容撑破容器问题。如果float 容器未定义宽度，ff下内容会尽可能撑开容器宽度，ie下则会优先考虑内容折⾏。故，内容可能撑破的浮动容器需要定义width。
4.浮动的清除，ff下必须清除浮动clear:both。
5. double-margin bug。ie6下给浮动容器定义margin-left 或者margin-right 实际效果是数值的2倍。解决⽅案，给浮动容器定义
display:inline。
6.margin bug.当外层元素内有float元素时，外层元素如定义margin-top:14px，将⾃动⽣成margin-bottom:14px。padding也会出现类似问题，都是ie6下的特产，该类bug 出现的情况较为复杂，远不只这⼀种出现条件。解决⽅案：外层元素设定border 或设定float。
7.吞吃现象.还是ie6，上下两个div，上⾯的div设置背景，却发现下⾯没有设置背景的div 也有了背景，这就是吞吃现象。对应上⾯的背景吞吃现象，还有滚动下边框缺失的现象。解决⽅案：使⽤zoom:1。
8.注释也能产⽣bug~~~“多出来的⼀只猪。”这是前⼈总结这个bug使⽤的⽂案，ie6的这个bug 下，⼤家会在页⾯看到猪字出现两遍，重复的内容量因注释的多少⽽变。解决⽅案：⽤“<!–[if !IE]> picRotate start <![endif]–>”⽅法写注释。
9.img下的留⽩，⼤家看这段代码有啥问题：
把div的border打开，你发现图⽚底部不是紧贴着容器底部的，是img后⾯的空⽩字符造成，给img设定 display:block可以解决。
10去line-height。<div style=”line-height:20px”><img />⽂字</div>，很遗憾，在ie6下单⾏⽂字 line-height 效果消失了。。。，原因是<img />这个inline-block元素和inline元素写在⼀起了。解决⽅案：让
img 和⽂字都 float起来。
11消失的hover状态。a:hover img{width:300px} 我们想让⿏标hover时，链接⾥包含的图⽚宽度变化，可惜在ie6下⽆效，ie7、ff下有效。12链接的hover状态。div:hover{} 这样的样式ie6是不认的，在ie7、ff下才有效果。
13block化的a链接，其内套absolute层，absolute层内放置img，ie下，⿏标点击img不会有链接效果，ff下正常。
14⽆法彻底清除的float。解决⽅案：给ul 属性zoom:1 （给li 加zoom:1 没⽤）
15ie下overflow:hidden对其下的绝对层position:absolute或者相对层position:relative⽆效。解决⽅案：给overflow:hidden加position:relative 或者position:absolute。另，ie6⽀持overflow-x或者overflow-y的特性，ie7、ff不⽀持。
16．e6下严重的bug，float元素如没定义宽度，内部如有div定义了height或zoom:1，这个div就会占满⼀整⾏，即使你给了宽度。float元素如果作为布局⽤或复杂的容器，都要给个宽度的。
17．e6下的bug，绝对定位的div下包含相对定位的div，如果给内层相对定位的div⾼度height具体值，内层相对层将具有100%的width值，外层绝对层将被撑⼤。解决⽅案给内层相对层float属性。
18．下的bug，<head></head>内有<base target=”_blank”/>的情况下，position:relative层下的float层内⽂字⽆法选中。这个bug迫使我修公⽤样式库。
19．f的缺点。width:100%在ie⾥⽤很⽅便，会向上逐层搜索width值，忽视浮动层的影响，ff下搜索⾄浮动层结束，如此，只能给中间的所有浮动层加width:100%才⾏，累啊。
20．iE6的问题。当层的⾼度⼩于20px时，IE6下要定义font-size：0px；否则⾼度为20px;
21．ff下，只有body和html同时定义height:100%,⾼度才为100%。IE下只需要定义body.
22．div的垂直居中问题:
vertical-align:middle; 将⾏距增加到和整个DIV⼀样⾼ line-height:200px; 然后插⼊⽂字，就垂直居中了。缺点是要控制内容不要换⾏. 23． IE捉迷藏的问题
当div应⽤复杂的时候每个栏中⼜有⼀些链接，DIV等这个时候容易发⽣捉迷藏的问题。
有些内容显⽰不出来，当⿏标选择这个区域是发现内容确实在页⾯。解决办法：对#layout使⽤line-height属性或者给#layout使⽤固定⾼和宽。页⾯结构尽量简单。
24．么web标准中IE⽆法设置滚动条颜⾊了
解决办法是将body换成html
25．链接(a标签)的边框与背景
a链接加边框和背景⾊，需设置 display: block,
26..ul标签在ff中默认是有padding值的,⽽在IE中只有margin有值所以先定义
ul{margin:0;padding:0;}
就能解决⼤部分问题
27.ff: div 设置 margin-left, margin-right 为 auto 时已经居中, IE 不⾏
ff: body 设置 text-align 时, div 需要设置 margin: auto(主要是 margin-left,margin-right) ⽅可居中
28.tu⽚居中，⽂字居左的写法。
rotate属性.abc{ text-align:left }
abc img{ display:block ; text-align:center;margin:o auto; }
29.层垂直居中的样式：
div{
position:absolute;
top:50%;
left:50%;
margin:-117px 0 0 -187px;
width:374px;
height:234px;
background-image:url(images/beijing.jpg);
}
30.form在IE6⾥⾯底下会多出来⼀⾏，加上>
32．空td显⽰边框 table { border-collapse:collapse; }
33.⿏标经过图⽚变化图⽚
function imagechange(img)
{
document.images[0].src=img;
document.images[0].width=400;
document.images[0].height=300;
}
</script>
</head>
<body>
<a href="#" onmouseout="imagechange('images1.jpg')" onmousemove="imagechange('images2.jpg')"><img src="images2.jpg" width="400" height="300" /></a>
</body>
34.表单输⼊框默认⽂字的设置
function cleanUp(id){
ElementById("userid").value == "请输⼊搜索关键字")
{
}
}
<input class="inp" id="userid" name="userid" type="text" value="请输⼊搜索关键字" onclick="cleanU
p('userid');" />
35.图⽚透明兼容写法：
filter:alpha(opacity=70);-moz-opacity:0.7;
36 ⽂字和图⽚在同⼀⾏垂直居中问题：
⼀个关键的属性: margin-bottom 通过修改图⽚的外边框的底部⾼度就可以让⽂字移动上来. 做法是把这个值设置为负数.例如我们把下⾯的16X15的图⽚设置它的 这样⽂字和图⽚就居中了
兼容性⼀直都是个令⼈头痛的问题，下⾯简单总结⽕狐与IE的兼容性问题。
1. 超链接访问过后hover样式就不出现的问题
被点击访问过的超链接样式不在具有hover和active了，很多⼈应该都遇到过这个问题，解决⽅法是改变CSS属性的排列顺序: L-V-H-A
1. <style type="text/css">
2. <!--
3. a:link {}
4. a:visited {}
5. a:hover {}
6. a:active {}
7. -->
8. </style>
2. FireFox下如何使连续长字段⾃动换⾏
众所周知IE中直接使⽤ word-wrap:break-word 就可以了, FF中我们使⽤JS插⼊的⽅法来解决
1. <style type="text/css">
2. <!--
3. div {
4. width:300px;
5. word-wrap:break-word;
6. border:1px solid red;
7. }
8. -->
9. </style>
10.<div id="ff">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
11.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
12.aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
13.aaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
Js代码
1. <scrīpt type="text/javascrīpt">
2. /* <![CDATA[ */
3. function toBreakWord(el, intLen){
4. var ōElementById(el);
5. var strContent=obj.innerHTML;
6. var strTemp="";
7. while(strContent.length>intLen){
8. strTemp+=strContent.substr(0,intLen)+"
9. ";
10. strContent=strContent.substr(intLen,strContent.length);
11. }
12. strTemp+="
13."+strContent;
14. obj.innerHTML=strTemp;
15. }
16. ElementById && !document.all) toBreakWord("ff", 37);
17. /* ]]> */
18. </script>
3.ff下为什么⽗容器的⾼度不能⾃适应
在⼦容器加了浮动属性后，该容器将不能⾃动撑开，解决⽅法是在标签结束后加上⼀个清除浮动的元素。
1. clear:both;
4.IE6的双倍边距BUG
浮动后本来外边距10px，但IE解释为20px，解决办法是加上
1. display: inline
5. IE6下绝对定位的容器内⽂本⽆法正常选择
此问题在IE6、7中存在，解决问题的办法是让IE进⼊到qurks mode。关于qurks mode的相关知识，请参考:
www.microsoft/..
6. IE6下图⽚下⽅有空隙产⽣
解决这个BUG的⽅法也有很多，可以是改变html的排版，或者设置img 为display:block
或者设置vertical-align 属性为vertical-align:top bottom middle text-bottom都可以解决.
7. IE6下两个层中间有间隙
这个IE的3PX BUG也是经常出现的，解决的办法是给.right也同样浮动 float:left 或者相对IE6定义.left margin-right:-3px;
8. list-style-image⽆法准确定位
list-style-image的定位问题也是经常有⼈问的，解决的办法⼀般是⽤li的背景模拟，这⾥采⽤相对定位的⽅法也可以解决。
9. LI中内容超过长度后以省略号显⽰的⽅法
此⽅法适⽤与IE与OP浏览器
1. <style type="text/css">
2. <! --
3. li {
4. width: 200px;
5. white-space:nowrap;
6. text-overflow:ellipsis;
7. -o-text-overflow:ellipsis;
8. overflow: hidden;
9. }
10. -->
11.</style>
10.web标准中定义id与class有什么区别吗
⼀.web标准中是不容许重复ID的,⽐如 div id="aa" 不容许重复2次,⽽class 定义的是类，理论上可以⽆限重复, 这样需要多次引⽤的定义便可以使⽤他.
⼆.属性的优先级问题
ID 的优先级要⾼于class，看上⾯的例⼦
三.⽅便JS等客户端脚本，如果在页⾯中要对某个对象进⾏脚本操作，那么可以给他定义⼀个ID，否则只能利⽤遍历页⾯元素加上指定特定属性来到它，这是相对浪费时间资源，远远不如⼀个ID来得简单.
11.如何垂直居中⽂本
将元素⾼度和⾏⾼设为⼀致。
1. <style type="text/css">
2. <!--
3. div{
4. height:30px;
5. line-height:30px;
6. border:1px solid red
7. }
8. -->
9. </style>
12.如何对齐⽂本与⽂本输⼊框
加上 vertical-align:middle;
1. <style type="text/css">
2. <!--
3. input {
4. width:200px;
5. height:30px;
6. border:1px solid red;
7. vertical-align:middle;
8. }
9. -->
10.</style>
11.
13.FF下⾯不能⽔平居中呢
FF下⾯设置容器的左右外补丁为auto就可以了
1. <style type="text/css">
2. <!--
3. div{
4. margin:0 auto;
5. }
6. -->
7. </style>
14.FF下⽂本⽆法撑开容器的⾼度
标准浏览器中固定⾼度值的容器是不会象IE6⾥那样被撑开的，那我⼜想固定⾼度,⼜想能被撑开需要怎样设置呢？办法就是去掉height设置min-height:200px; 这⾥为了照顾不认识min-height的IE6 可以这样定义:
1. {
2. height:auto!important;
3. height:200px;
4. min-height:200px;
5. }
15.IE6下容器的宽度和FF解释不同呢
1. <?xml version="1.0" encoding="gb2312"?>
2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "www.w
3. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
4. <style type="text/css">
5. <!--
6. div{
7. cursor:pointer;
8. width:200px;
9. height:200px;
10. border:10px solid red
11. }
12. -->
13. </style>
14.<div ōnclick="alert(this.offsetWidth)">web标准常见问题⼤全</div>
问题的差别在于容器的整体宽度有没有将边框（border）的宽度算在其内，这⾥IE6解释为200PX ,⽽FF则解释为220PX，那究竟是怎么导致的问题呢？⼤家把容器顶部的xml去掉就会发现原来问题出在这，顶部的申明触发了IE的qurks mode，关于qurks mode、standards mode的相关知识，请参考:
www.microsoft/..
16. 为什么web标准中IE⽆法设置滚动条颜⾊了
解决办法是将body换成html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论