常见兼容性问题总结
来源:互联网 发布:湘妹子的特点 知乎 编辑:程序博客网 时间:2024/05/23 13:23
<!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>
0 0
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- 常见浏览器兼容性问题总结
- 常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- CSS常见兼容性问题总结
- ie6,ie7常见兼容性问题总结
- 常见浏览器兼容性问题与解决方案总结
- 常见兼容性问题
- 常见兼容性问题
- 常见兼容性问题
- Install GraphLab Create --copy from turi
- 移动Web单页应用开发实践——页面结构化
- log4j.xml配置
- 快速排序
- leetcode_middle_32_449. Serialize and Deserialize BST
- 常见兼容性问题总结
- jQuery Valdation学习
- C++ 类成员函数的重载(overload),重写/覆盖(override),隐藏
- VS2015无法新建项目错误及解决方法:无法打开“……/VC?VCWizards/default.vcxproj”因为此版本的应用程序不支持其项目类型(.vcxproj)
- 学习 Jena
- 安装Sublime+Emmet插件作为前端开发环境,第一个简单页面
- 迟来的2016年总结
- 异常,异常的使用,Throw和Throws的区别,
- 菜鸟笔记#2.获取注册码