天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>设计之痛 比女人还麻烦的IE

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

天极网2006-06-14 10:39我要吐槽

设计之痛 比女人还麻烦的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;
}

最终想要的设计效果:

作者:龙犊责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级