css hack 和问题

浏览器特定的选择

当你想改变一个样式在一个浏览器而不是其他这些选择是非常有用的。

IE 6及以下

* html {}

IE 7及以下

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

IE 7只

*:first-child+html {}

IE 7和现代浏览器只

HTML> BODY {}

现代浏览器只（不是IE 7）

HTML> / ** / BODY {}

最近的歌剧版本9及以下

html:first-child {}

Safari浏览器

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

要使用这些选择器，将代码中的风格面前。例如：

#content-box {
width: 300px;
height: 150px;
}

* html #content-box {
width: 250px;
} /* 重写上面的风格，在IE 6及以下*改变了宽度为250像素 */

源

透明PNG在IE6

一个IE6的bug造成了很大的麻烦的是，它不支持透明的PNG图像。

你将需要使用一个过滤器，覆盖的CSS。

* html #image-style {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="filename.png", sizingMethod="scale");
}

移除链接点

Firefox的产生，大约链接出现，当你点击它们的点状轮廓。

这是简单的停止。只需添加outline:none：none给一个a标签

a {
outline: none;
}

应用宽度内联元素

如果你申请一个宽度为一个内联元素，将只工作inIE6。其实，这是IE6的故障-内联元素不应该需要有分配给它们的宽度。但是它往往是有用的，例如，如果你想在表单中所有的标签是相同的宽度。

所有的HTML元素或者是一个块或内联元素。内联元素包括跨度，一，强大的和EM。块元素包括的div，p，H1，形式和李。

你不能改变一个内联元素的宽度。解决的办法是从内嵌阻止更改的元素。

span {
width: 150px;
display: block
}

申请显示：块会变成跨度为一个块元素，允许您更改宽度。有一件事不过要注意的是块元素将总是开始一个新行，所以你可能需要使用浮点数为好。

围绕一个固定宽度的网站

要集中你的网站在浏览器内，相对定位添加到外层div，然后设置边距为自动。

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

图片替换技术

它始终是最好使用文字而不是标题的图像。在奇怪的时刻，当你必须有一个形象最好是使用背景图像与一个div内隐藏的文本。这对于屏幕阅读器和搜索引擎优化非常有用，因为它仍然使用普通的文本，所有与此相关的利益。

HTML：

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

CSS：

h1 {
background: url(heading-image.gif) no-repeat;
}

h1 span {
position:absolute;{
text-indent: -5000px;{
}

正如你可以看到，我们使用的是普通的HTML代码为H1标签，并使用CSS来替换图像中的文字。文本缩进将文本5000px的左侧，使得对用户不可见。

请尝试关闭你的CSS样式在您的网站，看看标题看起来。

最小宽度

在IE的另一个错误是，它不支持最小宽度。最小宽度是非常有用的，特别是对于有100％的宽度灵活的模板，因为它告诉浏览器停止收缩。对于所有浏览器，除了IE6的所有你需要的是min-width:Xpx; 。例如：

.container {
min-width:300px;
}

得到这个工作在IE6需要一些额外的努力！要开始你将需要创建2的div，一是嵌入到其他。

<div class=”container”>
<div class=”holder”>Content</div>
</div>

然后，你将需要最小宽度那张外层div。

.container {
min-width:300px;
}

现在，这是IE的黑客开始发挥作用。您将需要包括下面的代码。

* html .container {
border-right: 300px solid #FFF;
}

* html .holder {
display: inline-block;
position: relative;
margin-right: -300px;
}

随着浏览器窗口大小改变外层div的宽度减小，以适应直到它缩小到边框宽度，在这一点上不会进一步收缩，任意。持有人的div如下西装，也停止萎缩。外格边框宽度变内部div的最小宽度。

源

隐藏横向滚动

要删除水平滚动条，请将overflow-x: hidden;进入人体

body {
overflow-x: hidden;
}

如果你决定要具有较大的宽度比浏览器图片或Flash文件，这是非常有用的。