IE7及其更低版本

1. *:first-child+html {} * html {} 

仅针对IE7

1. *:first-child+html {} 

IE7与现代涉猎器

1. html>body{} 

仅古代浏览器(IE7不合用)

1. html>/**/body{} 

Opera9及其更低版本

1. html:first-child {} 

Safari

1. html[xmlns*=""] body:last-child {} 

要应用这些选择器,请将它们放在样式夙昔. 譬如:

1. #content-box {width:300px;height:150px;} 
2. * html 
3. #content-box {width: 250px; }  /* overrides the above style and changes the width to 250px in IE 6 and below */ 

三. 让IE6赞成PNG通明

一个IE6的Bug惹起了大贫穷, 他不赞成透亮的PNG图片.(css完成ie6 png图片通明)

你需求应用一个css滤镜

1. *html #image-style {bac千克round-image: none; 
2. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil 
3. ename.png", sizingMethod="scale");} 

四. 移除超链接的虚线(仅对FF有用)

FireFox下,当你点击一个超链接时可在焦点涌现一个虚线外观. 这很容易设计, 只要要在标签款式中插足 outline:none .

1. a{outline: none;} 

五. 给行内元素定义宽度

假设你给一个行内元素界说宽度,那么它只不过在IE6下有效. 全体的HTML元素要么是行内元素要末就好是块元素. 行内元素包括: <span>, <a>, <strong> 和 <em>. 块元素包括<div>, <p>, <h1>, <form>与<li> . 你不能界说行内元素的宽度, 为了规画这个问题你可以将行内元素转酿成块元素.

1. span { width: 150px; display: block } 

六. 让静止宽度的页面居中

为了让页面在浏览器居中展现, 重要相对定位外层div, 接下来把margin配置为auto.

1. #wrapper {margin: auto;position: relative;} 

七. 图片替换技艺

用文字总比用图片做标题问题好一些. 笔墨对屏幕阅读机和SEO都优劣常朋友的.

HTML:

1. <h1><span>Main heading one</span></h1>

CSS:

1. h1 { background:url(heading-image.gif) no-repeat; } 
2. h1 span {position:absolute;text-indent:-5000px;} 

你可以看到咱们对标题问题使用了标准的<h1>作为标签并且用css来将文本改换为图片. text-indent属性将笔墨推到了涉猎器右侧5000px处, 多么对付阅读者来说就看不见了.

关掉css,而后看识破部会是甚么容貌的.

八. 最小宽度

IE6另外一个裂缝便是它不支持 min-width 属性. min-width又是至关有用的, 特别是对于弹性模板来讲, 它们有一个100%的宽度,min-width 可以申报阅读器何时就不要再压缩宽度了.

除IE6之外一切的阅读器你只紧要一个 min-width: Xpx; 比喻:

1. .container {min-width:300px;} 

为了让他在IE6下工作, 咱们必要一些特别的工作. 最先的时分我们须要确立两个div, 一个涵概另外一个:

1. <div class="container">
2.     <div class="holder">Content</div>
3. </div>

今后你必要定义外层div的min-width属性

1. .container {min-width:300px;} 

这时该是IE hack大显威力的时辰了. 你需要囊括下列的代码:

1. * html .container {border-right: 300px solid #FFF;} 
2. * html .holder {display: inline-block;position: relative;margin-right: -300px;} 

随着涉猎器窗口大小的外层div宽度高涨，以顺应直到它放大到了边框的宽度，此时它不会进一步萎缩的。持有人DIV跟风，也住手萎缩。外层的div边框宽度成为内div的最小宽度。

九. 隐藏水平迁移变动条

为了提防涌现水平转折条, 在body里参预 overflow-x:hidden .

1. body { overflow-x: hidden; } 

当你选择运用一个比浏览器窗口大的图片可以或许flash时, 这个技巧将尤其有用

樊篱IE浏览器（也便是IE下不显示） *:lang(zh) select {font:12px !important;} /*FF,OP可见，特别提示：因为Opera近来的晋级，今朝此句只为FF所辨认*/ select:empty {font:12px !important;} /*safari可见*/ 这里select是选择符，依照状况更换。第二句是MAC上safari浏览器独占的。 仅IE7与IE5.0可以识别 *+html select {…} 背地里临须要只针对IE7与IE5.0做技俩的时分就能接纳这个HACK。 仅IE7可以识别 *+html select {…!important;} 暗地里临需要只针对IE7做花色的时刻便可以接纳这个HACK。 IE6及IE6以下辨认 * html select {…} 这个地方要特别当心得多博客都写成了是IE6的HACK的确IE5.x一样可以辨认这个HACK。其它浏览器不辨认。 html/**/ >body select {…} 这句与上一句的感召近似。 仅IE6不辨认，樊篱IE6 select { display /*樊篱IE6*/:none;} 这里主要是通过CSS表述兼并一个属性与值，表达在冒号前。 仅IE6与IE5不辨认，屏蔽IE6与IE5 select/**/ { display /*IE6,IE5不识别*/:none;} 这里与上面一句不同的是在选择符与花括号之间多了一个CSS注解。不樊篱IE5.5 仅IE5不辨认，樊篱IE5 select/*IE5不识别*/ {…} 这一句是在上一句中去掉了属性区的正文。只有IE5不辨认，IE5.5可以识别。 盒模型计划门径 selct {width:IE5.x宽度; voice-family :"\"}\""; voice-family:inherit; width:准确宽度;} 盒模型的革除方式不是经由!important来处理的。这点要体会。 肃除浮动 select:after {content:"."; display:block; height:0; clear:both; visibility:hidden;} 在Firefox中，当子级都为浮动时，那么父级的高度就无法完全的包住整个子级，那么这时用这个肃清浮动的HACK来对父级做一次界说，那末即可以筹划这个问题。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c52449.shtml