作者：阿捷 2004-7-24 14:56:36

在设计《网页设计师》页面的时候，有一个问题一直困扰着我，主菜单在IE和其他(Mozilla、Opera等)浏览器里显示的效果偏差2px。截图如下：

IE中的效果

Mozilla Firefox中的效果

这是因为IE对盒之间距离的解释的bug造成的(参考onestab的” 浮动模型的问题 “)。我一直没有解决这个问题，直到我翻译 ” 表格对决CSS–一场生死之战 “时，作者的一个技巧提示帮我找到了解决的方法：用!important。

!important是CSS1就定义的语法，作用是提高指定样式规则的应用优先权(参见：W3.org的解释)。语法格式{ sRule!important }，即写在定义的最后面，例如：

box{color:red !important;}

最重要的一点是：IE一直都不支持这个语法，而其他的浏览器都支持。因此我们就可以利用这一点来分别给IE和其他浏览器不同的样式定义，例如，我们定义这样一个样式：

.colortest {

border:20px solid #60A179 !important;

border:20px solid #00F;

padding: 30px;

width : 300px;

}

在Mozilla中浏览时候，能够理解!important的优先级，因此显示#60A179的颜色：

在IE中浏览时候，不能够理解!important的优先级，因此显示#00F的颜色：

可以看到，利用!important，我们可以针对IE和非IE浏览器设置不同的样式，只要在非IE浏览器样式的后面加上!important。因此，上面提到的我的主页2px的显示差别也轻松解决：

PADDING-TOP: 11px !important;

PADDING-TOP: 9px;

!important必定成为CSS布局的利器，请记住和掌握它吧:)

作者：阿捷 2004-7-22 22:37:07

本文来自：tantek.com，也可以阅读《网站重构》第225-235页了解更多。

郭爽注：简单的说就是 ie 的width是包含padding+border的最大宽度；而mozilla 指的是不包含这些的纯内容区的宽度。

我们定义一个最基本的层：

boxtest

div.boxtest{

border:20px solid #60A179;

padding: 30px;

background : #ffc;

width : 400px;

}

标准情况下，这个盒的宽度是:20+30+300+30+20=400px。

但是在IE5.0浏览器中，对盒模型的宽度解释有个bug，它认为300 px是整个盒的总宽度，内容的宽度变成：300-20-30-20-30=200px。

为了弥补这个bug，采用一个技巧：即增加一个IE5不能解释的声音属性”voice-family”,读到这个定义时浏览器就不再继续阅读，认为宽就是400px，但而其他符合标准的浏览器会继续阅读，并执行第二个真实值300px。

content

div.content{

border:20px solid #60A179;;

padding:30px;

background: #ffc;

width :400px;

voice-family : “”}”";

voice-family :inherit;

width : 300px;

}

同样，在Opera7.0以前的浏览器也有这样的解析bug。但我们并不需要使用伪值，有更简单的办法解决这个问题： html>body .content { width :300; }

郭爽注：voice 方法不行，还是 html>body 这个可行，代码如下：在两种浏览器中宽度显示一致

[align=right][size=1][color=#cccccc][Edit on 2004-8-3 15:57:14 By guoshuang][/color][/size][/align]

作者：阿捷 2004-7-5 14:35:49

如何使DIV居中

主要的样式定义如下：

body {TEXT-ALIGN: center;}

#center { MARGIN-RIGHT: auto; MARGIN-LEFT: auto; }

说明：

首先在父级元素定义TEXT-ALIGN: center;这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: auto;MARGIN-LEFT: auto; ”

需要说明的是，如果你想用这个方法使整个页面要居中，建议不要套在一个DIV里，你可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 就可以了。

如何使图片在DIV 中垂直居中

用背景的方法。举例：

body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194×79.gif) #FFF no-repeat center;}

关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者”bottom right”等，也可以直接写数值”50 30″

效果如下：

如何使文本在DIV中垂直居中

如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：

说明：

vertical-align:middle;表示行内垂直居中，我们将行距增加到和整个DIV一样高line-height:200px;然后插入文字，就垂直居中了。

[align=right][size=1][color=#cccccc][Edit on 2004-8-3 15:43:10 By guoshuang][/color][/size][/align][align=right][size=1][color=#cccccc][Edit on 2004-8-3 15:43:36 By guoshuang][/color][/size][/align]