YaHoo 初始化css代码+IE常见兼容问题汇总

本文提供了一套Yahoo风格的基础CSS初始化代码,旨在消除元素默认样式,并总结了针对IE浏览器的常见兼容性问题及解决方案,包括浮动元素的边距问题、display:inline-block在IE6/7的实现、以及透明度的跨浏览器支持。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td { 

margin:0; padding:0; 

}

body { 

background:#fff; color:#555; font-size:14px; font-family: Verdana, Arial, Helvetica, sans-serif; 

}

td,th,caption { 

font-size:14px; 

}

h1, h2, h3, h4, h5, h6 { 

font-weight:normal; font-size:100%; 

}

address, caption, cite, code, dfn, em, strong, th, var { 

font-style:normal; font-weight:normal;

}

a { 

color:#555; text-decoration:none; 

}

a:hover { 

text-decoration:underline; 

}

img { 

border:none;

 }

ol,ul,li { 

list-style:none; 

}

input, textarea, select, button { 

font:14px Verdana,Helvetica,Arial,sans-serif; 

}

table {

 border-collapse:collapse;

 }

html {

overflow-y: scroll;

} 


.clearfix:after {

content: "."; display: block; height:0; clear:both; visibility: hidden;

}

.clearfix { 

*zoom:1; 

}

=====================ie常见兼容问题汇总============================

1、有float+margin 导致双边距问题。

    解决方案:加入ie6、7下特有css样式 {float:left;margin:10px;*display:inline}

2、ie8及以上、google等兼容 display:inline-block 达到 float 效果,单ie6、ie7不兼容

    解决方案:{display:inline-block;*float:left;*display:inline}


注明(hack写法):

*display:inline; 表示在ie6、7下作用;
_display:inline; 表示仅在ie6下作用;

3、透明度兼容

  1. .transparent_class {  
  2.       filter:alpha(opacity=50);  
  3.       -moz-opacity:0.5;  
  4.       -khtml-opacity: 0.5;  
  5.       opacity: 0.5;  
  6. }  

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值