专注于WEB前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

发现了一个IE6的2个form嵌套bug

如果网站是.net程序的话,body下面紧跟着就是一个form,因此页面出现两个form的几率很高。在做公司目前的一个项目时,发现当在网页中加进去一个form后,用IE6测试时,发现加进去的form后面的文字变成居中对齐了。比如下面的代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />   
<style>
body,div,h2,form,p{margin:0;padding:0;font-weight:400;} 
body{background:#FFF;color:#444;font:12px/20px Arial;text-align:center;} 

#body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
#body div{text-align:left;} 
</style>  
</head>  
  
<body>  
<form>第一个form 
    <div id="body">  
        <div>  
            <form>第二个form:这是一个神奇的Form,这个form下面的内容,IE6会居中显示,继承了body的text-align:center(#body:{text-align:left}没有起到作用)。删除这个form后,会发现ie6下下面的内容都变成正常的左对齐了。 
            </form>  
            此现象应该是form内又嵌套了一个form所导致。 
        </div>  
        <div>这里的内容,要再设置一次:#bd div{text-align:left;} ie6才会左对齐</div>  
        <h2>这里的内容IE6居中了</h2>  
    </div>  
</form>
</body>  
</html>  

 由于以前接触的基本都是php的程序,从来没遇到过这样的情况,.net把body间的内容用一个form给包含了,当里面再加进去一个form后,上面描述的问题就出现了。

我想到的解决办法就是:

1、 把css里body的text-align:center;修改成:text-align /*IE5.5 only*/:center; (这里没照顾ie5.0),由于IE5、IE6都识别前面加下划线“_text-align:”这个hack,所以这个hack在这里也用不上(以前还以为加下划线只有IE6能识别)。 body加text-align:center;也就是为了让IE5实现margin:0 auto的效果。

2、狠下心把body的text-align:center删掉也能解决,但是ie5就。。可惜IE5还有极少数的人在用。。

3、<!--[if IE 6]> body{text-align:left;} <![endif]--> 或者 * html body{text-align:left;}/*IE6/ie7都识别*/

4、重设#body下面的元素,#body div, #body h2{text-align:left;} 

在实践中上面的四种方法都可能用到,个人更偏向于第三、四种方案。

 另外发现我blog的字体,在chrome下不是一般的难看啊。。。越来越不喜欢这个风格了。。不知道啥时候有空做一个。还有这两天做了一个雅黑+DejaVuSansMono的等宽字体,等宽主要是方便用vim的时候选择,还有bug 所以还不能发布,等发现没什么问题了就发布出来。主要是搜索很久都没找到雅黑+DejaVuSansMono的等宽字体,所以才萌生了自己做的想法。这个合并字体搞了很久,也搞的很郁闷,制作字体的时候CUP经常100%,终于发现我的电脑年纪不小了。。英文使用DejaVu,是因为最喜欢它的等宽字体,Consolas、Monaco、Bitstream等等好多等宽字体测试后,发现DejaVu的效果是最好的,1、l和0、o、O很容易区分(dejavu也是Bitstream出的他们很接近)。

/ 分类: 开发 / TrackBackhttp://t-u1.xhl.io/archives/666/trackback标签: ie, bug

添加新评论 »