如果网站是.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出的他们很接近）。
相关文章