兼容性问题
1、ie8下图片边框问题(记)
<a>
<img src="">
</a>
解决办法:reset.css
img {
//取消默认添加的边框
border:none;
}
2. ie7下子元素相对定位 父盒子overflow属性失效问题
3. ie6下小高度盒子问题
原因:ie6下有默认行高
4. ie6浮动双边距问题
5. ie8下透明度问题(记)
背景透明, 内容不透明
background-color:rgba(0,0,0,.3)
背景和内容一起透明
opacity:0-1; 0是完全透明 (消失) 1是不透明
ie8下透明度显示效果:
常见问题(所有浏览器)(记)
图片下间隙问题
盒子>img 图片和盒子多的底边有一个默认的间距
图片下间隙:
原因:图片具有文本的特性---》 以基线对齐---》 间距就是基底之间距离
解决办法:
1. 给父盒子加字体属性
2. 图片设置除了基线以外的对齐属性
3. 给图片转块元素
文本框和按钮对不齐
css hack(了解)
结构hack(条件hack)(ie10废除了)(记)
在ie的低版本里 查询一些盒子或者是样式要不要显示的条件
// 在什么地方需要显示 ie8- 条件是: 只要浏览器版本是ie8及其以下就显示这个p
// lte: less than or equal 小于或者等于
<!--[if lte IE 8 ]>
<p>
您的浏览器版本太低,可能存在要换的危机 <a href="">UC</a>
</p>
<![endif]-->
css属性hack
.box {
color: red;
/* ie7及其以下的标识是* */
*color:orange;
/* ie6及其以下是蓝色 */
_color:blue;
/* ie8-ie9识别\0 */
color:deeppink\0;
}
选择符集hack
/* ie6下识别的类 */
*html .a {
background-color: deeppink;
border-radius: 50%;
}
/* ie7下识别的类 */
* + html .a {
background-color: springgreen;
border-radius: 50%;
}