CSS hacks与争议
翻译说明：
这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非常感谢！ 字串6
查看原文：http://diger.cn/blog/?p=324
英文地址：http://www.solidstategroup.com/page/1592
1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。 字串9
2、浏览器特定的选择器 字串3
当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。 字串3
IE6以下 字串8
*html{}
字串2
IE 7 以下 字串7
*:first-child html {} * html {} 字串3
只对IE 7
*:first-child html {} 字串7
只对IE 7 和现代浏览器
html>body {} 字串9
只对现代浏览器(非IE 7) 字串5
html>/**/body {} 字串7
最新的Opera 9以下版本
字串7
html:first-child {}
Safari
字串8
html[xmlns*=”"] body:last-child {}
字串8
要使用这些选择器，请在样式前写下这些代码。例如：
#content-box {
width: 300px;
height: 150px;
}
* html #content-box {
width: 250px;
}
/* 重写上面的代码并且把宽度改为250PX
在IE6以下版本中适用。 */ 字串4
3、在IE6中使用透明PNG图片 字串5
IE6的一个很难处理的BUG就是它不支持透明PNG图片。
你可能需要用一个重写的CSS的滤镜来解决这个问题：
字串7
*html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="fil
ename.png", sizingMethod="scale");
} 字串4
4、去掉连接虚线框
当你点击链接时，Firefox会在链接周围产生一个虚线外框。
字串4
字串4
这个很好解决，只需在a标签中添加outline:none就可以了。
字串9
a{
outline:none;
}
5、对inline元素应用宽度。 字串9
如果你对一个inline元素使用宽度，它将只在IE6下起作用。
所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a><strong>和<em>Block标签包括<div><p><h1><form>和<li> 字串4
你不能控制inilne标签的宽带，不过有一个方法是把标签属性从inline改为Block。
字串8
span{
width:150px;
display:block;
} 字串5
应用display:block能够把span标签变成block标签，从而控制它的宽度。
字串4
6、使一个固定宽度的网站居中。
字串9
为了让你的网站在浏览器中居中，可以为最外层Div添加position:relative属性，然后将margin设为auto。
字串8
#wrapper {
margin: auto;
position: relative;
}
字串9
7、图片替换技术
字串5
对于头部来说，永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用，尽管依然使用很普通的文字，这可以联想到所有的优点。
字串1
HTML： 字串5
<h1><span>Main heading one</span></h1> 字串6
CSS:
h1 {
background: url(heading-image.gif) no-repeat;
}
h1 span {
position:absolute;
text-indent: -5000px;
} 字串4
正如你所见，我们对H1标签使用普通的HTML代码，用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处，从而用户看不到它们。 字串6
来源：蓝色理想 作者：mienflying