关于fieldset在IE中显示背景色的问题的解决方案
则名
以前也用过fieldset来做一些表单的容器,但没有设置过fieldset 的 background-color属性,今天同事用到了fieldset并设置了背景,在IE6.0下出现了状况,背景色范围伸展到了legend的顶部高度,看图1:

很明显这不是想要的结果,试图想办法解决,先查看代码:
css样式:
fieldset{ border:1px solid #ccc; margin:1em auto; padding:0 1em; background-color:#f1f1f1; width:350px;}
legend{ font-weight:bold;}
xhtml代码:
<fieldset>
<legend>:标题就是标题</legend>
<p>您能花时间给我写信并阅读我的来信,我感到十分高兴,我知道目前要加入ILG,语言是我的最大“障碍”,
但我仍然希望能够加入到这个具有热情、公平和具有大公思想的组织,愿意为web standards在中国基层的发展努力!
当然,如果不幸不能加入,在以后我会再次通过努力申请加入的。</p>
</fieldset>
看不出任何问题啊?!
在捣腾了几次不奏效后,上网搜,还是未果。这时候 我 想到求助Taobao.com UED Team的承志,据我了解承志在css上算得上一专家,于是写email给他,信写到一半,我突然想到在Firefox里测试下有没有问题?
拿到Firefox下浏览没问题,正常显示,这就的好好想想了。估计是IE6.0的“特殊待遇”,那就的针对IE6.0来做手脚了,根据这个思路首先想到最有用的星号html招数,然后在星号html招数的基础上指定legend标签的margin-top属性,用这个方法来应对IE6.0的特殊待遇,在原有的css样式里加入如下样式代码:
* html legend {
margin: -10px 0 0 0;
position:fixed;
}
加入这一小段代码后,再在IE6.0下浏览,看图2:

哈哈!!正常了,ok,问题解决!呵呵,不用求救于人了,取消email。
现在记录下这个ie bug的解决办法,以供有遇到同类问题的兄弟们参考!
注:IE5.5及NS6尚不支持 psosition的属性参数(参考苏沈小雨制作的css2.0中文手册)
Posted in 我的工作, 我的爱好 |
2 Comments »
