设计之痛 比女人还麻烦的IE浏览器

设计之痛 比女人还麻烦的IE浏览器

昨天帮朋友做页面导航的样式设计，要求链接加深灰色边框、浅灰色背景，两象素间距，我在想，这还不简单，用CSS定义，几下就搞定了，我打开记事本（申明一点：高手向来都是用记事本搞定一切的 ^_^），不到一分钟就完成了朋友所要求的效果，保存代码为htm格式，用IE浏览器打开这个文件，一看，傻眼了，很丑，不是一般的丑，（如图一）赶忙打开源文件，修改了一下padding属性，设置A的padding值为10px，再打开，这下好多了，不过这次出现了一个严重的问题，A标记的上边框线不翼而飞（如图二），怎么回事，好像以前没有遇到过这样的问题吧。我重新检查了一下CSS样式表代码，一点没错，这是什么原因呢？

图一

图二

图三

于是我打开DW，在DW的设计视图中发现显示效果与我预期的效果是一模一样（如图三），但怎么在IE浏览器中显示出来的效果如此糟糕呢？不仅没有上边框线，而且文字显示在边框的顶部，极不对称，不美观，于是我挖空心思寻找定义文本对其方式的CSS元素，可惜CSS中只有一个定义水平文本对齐方式的元素text-align，于是我自作聪明地生造了一个元素text-valign,定义成：text-valign:middle； 再保存一看一点也没有什么变化，赶快删除这个杜撰的元素，怎么办？于是我又在style中定义了这么一句：border-top:1px solid #ccc;再保存，一看，还是没有什么变化，看来问题不在这里，没有办法，于是我又尝试定义文本的行高，在里面加了一句:line-height:28px;此时其在DR的设计试图效果如图四：

图四

中间明显多了白色的底纹，此时在IE中的效果如图五：

图五

文字已经是垂直居中了，但上边框依旧还没有出来，于是我再修改了一下padding值为padding:5px 10px; 也就是说上下内边距为5px，左右内边距为10px,此时其在DR中的设计视图基本上没有发生什么大的变化，只不过变瘦了一点，如图六：

图六

然后刷新IE浏览器，哇噻，这下撞对了，看看出来的效果图七：

图七

于是我纳闷了，为什么一个想起来很简单的效果实现起来却这么困难呢，对于A标记的CSS定义，本来只要简单地定义border、background-color和padding的属性值就可以实现的效果却折腾了这么久呢。

于是我又回到原来的地方，把后来多加的属性都去掉，用火狐浏览器打开网页文件，如下图：

图八

下面分析总结一下结果：

样式表	IE浏览结果	Firefox浏览结果
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:10px; }
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:10px; line-height:28px; }
a{ border:1px solid #ccc; background-color:#F3F3F3; font-size:12px; margin:1px; color:#333333; text-decoration:none; padding:5px 10px; line-height:28px; }

最终想要的设计效果：

（出处：清风网络学院）