【翻译】CSS hacks与争议

mienflying 楼主

翻译说明：

这是Solid State Group网站上的一篇很友好的文章，解决了我在设计中遇到的很多问题，故在此我翻译其文，并对原作者表示非常感谢！

查看原文：http://diger.cn/blog/?p=324

英文地址：  http://www.solidstategroup.com/page/1592



1、说明本文阐述了8条我们发现的在用CSS设计中有用的解决方案。

2、浏览器特定的选择器

当你想在一个浏览器里改变样式而不像在其他浏览器中改变时，这些选择器很有用。

IE6以下

1.    *html{}

复制代码

IE 7 以下

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

复制代码

只对IE 7

1. *:first-child+html {}

复制代码

只对IE 7 和现代浏览器

1. html>body {}

复制代码

只对现代浏览器(非IE 7)

1. html>/**/body {}

复制代码

最新的Opera 9以下版本

1. html:first-child {}

复制代码

Safari

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

复制代码

要使用这些选择器，请在样式前写下这些代码。例如：

1. #content-box {
   
2. width: 300px;
   
3. 
   
4. height: 150px;
   
5. 
   
6. }
   
7. 
   
8. * html #content-box {
   
9. 
   
10. width: 250px;
    
11. 
    
12. }
    
13. 
    
14. /* 重写上面的代码并且把宽度改为250PX
    
15. 
    
16. 在IE6以下版本中适用。 */

复制代码

3、在IE6中使用透明PNG图片

IE6的一个很难处理的BUG就是它不支持透明PNG图片。

你可能需要用一个重写的CSS的滤镜来解决这个问题：

1. *html #image-style {
   
2. 
   
3. background-image: none;
   
4. 
   
5. filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”fil
   
6. 
   
7. ename.png”, sizingMethod=”scale”);
   
8. 
   
9. }

复制代码

4、去掉连接虚线框

当你点击链接时，Firefox会在链接周围产生一个虚线外框。



这个很好解决，只需在a标签中添加outline:none就可以了。

1. a{
   
2. 
   
3.    outline:none;
   
4. 
   
5. }

复制代码

5、对inline元素应用宽度。

如果你对一个inline元素使用宽度，它将只在IE6下起作用。

所以的HTML标签要么是Block的要么就是inline的。inline属性的标签有<span><a><strong>和<em>Block标签包括<div><p><h1><form>和<li>

你不能控制inilne标签的宽带，不过有一个方法是把标签属性从inline改为Block。

1. span{
   
2. 
   
3.    width:150px;
   
4. 
   
5.    display:block;
   
6. 
   
7. }

复制代码

应用display:block能够把span标签变成block标签，从而控制它的宽度。

6、使一个固定宽度的网站居中。

为了让你的网站在浏览器中居中，可以为最外层Div添加position:relative属性，然后将margin设为auto。

1. #wrapper {
   
2. 
   
3. margin: auto;
   
4. 
   
5. position: relative;
   
6. 
   
7. }

复制代码

7、图片替换技术

对于头部来说，永远是最好用文字而不是图片。在你必须要用图片的某个特殊地方最好使用隐藏文字的层的背景图片。这对于屏幕阅读和SEO非常有用，尽管依然使用很普通的文字，这可以联想到所有的优点。

HTML：

  

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

复制代码

CSS:

1. h1 {
   
2. 
   
3. background: url(heading-image.gif) no-repeat;
   
4. 
   
5. }
   
6. 
   
7. h1 span {
   
8. 
   
9. position:absolute;
   
10. 
    
11. text-indent: -5000px;
    
12. 
    
13. }

复制代码

正如你所见，我们对H1标签使用普通的HTML代码，用CSS来将图片替代文字。Text-indent把文字放到左边5000像素处，从而用户看不到它们。

8、最小宽度

IE的另外一个Bug就是它不支持min-width属性。min-width确实非常有用，特别是对于100%宽度的可变模板来说，因为他告诉浏览器停止收缩。

对于除IE6以外的所有浏览器来说你只需min-width:xpx;例如：

1. .container {
   
2. 
   
3. min-width:300px;
   
4. 
   
5. }

复制代码

要让这些在IE6下起作用的话你要添加额外的努力！你需要创建两个DIV，一个包含着另一个。

1. <div class=”container”>
   
2. 
   
3. <div class=”holder”>Content</div>
   
4. 
   
5. </div>

复制代码

然后你需要设置外面层的min-width：

1. .container {
   
2. 
   
3. min-width:300px;
   
4. 
   
5. }

复制代码

现在又要IE hack起作用了，你需要写下以下代码：

1. * html .container {
   
2. 
   
3. border-right: 300px solid #FFF;
   
4. 
   
5. }
   
6. 
   
7. * html .holder {
   
8. 
   
9. display: inline-block;
   
10. 
    
11. position: relative;
    
12. 
    
13. margin-right: -300px;
    
14. 
    
15. }

复制代码

当浏览器窗口调整外层宽度来适应直到它缩小到border的宽度时，这个时候它就不能够在缩小了。而holder层也会停止收缩。外层的边框宽度变成了内层的最小宽度。

9、隐藏水平滚动

要去除水平滚动条，可以在body中插入overflow-x:hidden属性。

1. body {
   
2. 
   
3. overflow-x: hidden;
   
4. 
   
5. }

复制代码

这在你决意要用一个比浏览器款的图片或Flash时很有用。

[ 本帖最后由 mienflying 于 2007-11-17 17:49 编辑 ]

mienflying 楼主

自己来坐沙发了！

见到的最全的Hack了


原文的标题是《CSS Hacks & Issues》，翻译时我认为hacks不用翻译的，大家都知道什么意思，而且用hack确切。而Issues这个词，我翻译成了争议，不知道是否确切。

web12345

我觉得多了解了解常用浏览器的一些常见差异比学习hack有效得多,过于依赖hack只是知其然.

nower

最小宽度那个，我测试代码根本不行

jxbsuzs

刚学CSS,对hack很是恼火,慢慢看一下LZ的贴子...谢谢LZ~~

ahhqx

挺不错的文章,支持一下

chenzhe

支持一下。

zeq222

谢过LZ的整理了哦

jorshen

真的不错  刚学css对浏览器兼容确实挺头疼！

badwish

从没用过HACK。。

No01

同上  我也没用过 ........

nicekids

6和7真的可以吗

q39394601w

好文章~~帮助很大

buliuming

不管怎样还是支持一下

pdf66

受益匪浅阿！

qiutianmty

真的很厉害呀，我也要收藏。谢谢老大了。

wj829

没什么用处的东东

baljeans

我竟然能看懂了 呵呵

14px

有些是小技巧，很受益的说，另外min-width这东西，主流浏览器只有IE6不支持，所以这样写基本上就可以了：
min-width:300px;
_width:300px;

vicysunnie

记得最初学CSS...CSSZENGARDEN有个设计就是利用HACK...不过现在IE对CSS的支持也趋于标准化...