常见兼容性问题总结

2024-04-27 15:15:47

字体：大中小

来源：转载

供稿：网友

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>元素同行问题</title> <style type="text/CSS"> .box{width: 400px;} .left{width:100px;height:300px;background: red;float: left;} .right{width: 300px;float: left;} /* 在IE6下元素浮动要并在同一行的元素都要加浮动，否则会产生兼容性问题 */ </style></head><body> <div class="box"> <div class="left"></div> <div class="right"> 练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习练习 </div> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE6下双边距问题</title> <style type="text/css"> body{margin: 0;} .wrap{border: 2px solid #000;float: left;} .box{width: 100px;height: 100px;background: red;margin: 0 100px;float: left;display: inline;} /* IE6下的双边距BUG 在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍解决办法: 给box加上display:inline; */ </style></head><body> <div class="wrap"> <div class="box"></div> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE67下li的4px间隙</title> <link rel="stylesheet" type="text/css" href="reset.css"> <style type="text/css"> .list{width: 300px;font-size: 16px;} .list li{border: 1px solid #000;} a{float: left;} span{float: right;} /*清浮动*/ li:after{content: "";display: block;clear: both;} li{zoom:1;} li{vertical-align: top;} /* IE6,7下li的4px的间隙问题在IE6,7下li本身没有浮动，但是内容浮动了li之间就会多出4px间隙解决办法：给li加vertical-align：top/middle/bottom */ </style></head><body> <ul class="list"> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> <li> <a href="#">文字文字文字文字文字</a> <span>作者</span> </li> </ul></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>图片下的空隙</title> <style type="text/css"> .box{border: 1px solid black;background: red;} img{width: 300px;height: 300px;vertical-align:top;} /* 解决办法：给img加上vertical-align:top; */ </style></head><body> <div class="box"> <img src="images/1.jpg" /> <img src="images/2.jpg" /> </div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>IE6下最小高度问题</title> <style type="text/css"> .box{height: 0;background: black;overflow: hidden;} /* 在IE6下高度小于19px的元素，高度都会被当做19px来处理,加上font-size:0;可以处理至2px 解决办法：overflow:hidden; 最小只能处理至1px */ </style></head><body> <div class="box"></div></body></html>

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>input背景图片滚动问题</title> <style type="text/css"> input{margin: 0;padding: 0;} .text{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;margin-bottom: 70px;} .box{width: 300px;height: 40px;border: 1px solid blue;background: url(images/sun.jpg) 0 center no-repeat #ccc;} .text2{width: 300px;height: 40px;border:none;background: 0;} /* IE6下，当内容超出时，背景图片会滚动解决办法：把input用一个div包起来，在div中设置样式，把input大小调的和div一样大，去掉border和background-color； */ </style></head><body> <input type="text" name="" class="text"> <div class="box"> <input type="text" name="" class="text2"> </div></body></html>

上一篇：安装Sublime+Emmet插件作为前端开发环境，第一个简单页面

下一篇：jQuery Valdation学习