浏览器|设计
设计之痛 比女人还麻烦的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; } |
最终想要的设计效果: