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

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

  8. #body,#ft{clear:both;width:706px;margin:0 auto;border:1px solid #CCC;text-align:left;} 
  9. #body div{text-align:left;} 
  10. </style>  
  11. </head>  
  12.   
  13. <body>  
  14. <form>第一个form 
  15.     <div id="body">  
  16.         <div>  
  17.             <form>第二个form:这是一个神奇的Form,这个form下面的内容,IE6会居中显示,继承了body的text-align:center(#body:{text-align:left}没有起到作用)。删除这个form后,会发现ie6下下面的内容都变成正常的左对齐了。 
  18.             </form>  
  19.             此现象应该是form内又嵌套了一个form所导致。 
  20.         </div>  
  21.         <div>这里的内容,要再设置一次:#bd div{text-align:left;} ie6才会左对齐</div>  
  22.         <h2>这里的内容IE6居中了</h2>  
  23.     </div>  
  24. </form>
  25. </body>  
  26. </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出的他们很接近)。

TAG ie, css

这个用css hacks 判断浏览器大概是上个月写的,其中的hacks基本涵盖了大部分浏览器,本页面经过测试的浏览器:IE5.0、IE5.5、IE6、 IE7、IE8(beta1&beta2)、Opera 9.5, Firefox 3, Safari4、K-Meleon、Google Chrome。 其实用css判断浏览器是没有什么意义的,其主要意义就在于css hack在多浏览器下的使用,及如何用更少的css代码来实现各种主流浏览器的兼容。这个页面里的css hacks基本上囊括了ie系列(ie5.0-IE8)的csshack,同时也加入了不太常用的针对Opera和Safari的css hacks。

演示可以见:http://www.fantxi.com/blog/demo/html/browser_detector.html

在css hacks方面,我觉得最好不要用!important来提升指定样式的优先权,我不喜欢这它,因为如果使用它的话,你可能会发现写出的css代码相对较多。当然也不是完全不用它,目的只是当我们加入hacks时,是否要考虑一下如何才能使css的代码更精简?顺便也应该想到,当我们写XHTML代码时,是否考虑某处用div合适,还是ul合适,或者是dl合适?当我们写javascript的时候呢,是否也可以使用最少的代码来实现某一效果?有些人只是写出了div、css代码就很自豪的说自己已经会div、css了,当我问他浏览器兼容和HTML标签语义化时,他却说不出。其实有很多地方值得我们去研究,上次帮公司做的网页,css和js代码基本都被我压缩的不能再压缩了,先手工压缩再机器压缩,很爽很爽:), 不过他们说我变态~。其实这样网站的效率才能达到最高。

我的做法就是在做网页时,应该以firefox来作为参照,然后再在ie和其他浏览器下测试,这样写出的css代码可能会是最少的。还有就是善用display:inline来解决ie下margin加倍,善用clear:both,有时也可以这样:<!--[if IE]><link rel="stylesheet" type="text/css" href="ie.css" /><![endif]-->,给IE单独做一个css。因为之前做的是门户级的网站,写了很多页面,从中也学到了很多新知识,一时想不起来了,有时间再整理出来。还有只要结构写的好,不需要hack大部分也都能兼容。能不用hack就不用。

TAG css, hacks

 之前在这里:http://www.fantxi.com/blog/archives/534总结了一次,这次加上点。

css代码
  1. 这个是基本大家都知道的:   
  2. test{margin:1px!important;margin:2px}   
  3. firefox/IE7 -> 1px  
  4. IE6 -> 2px  
  5.   
  6. 下面两个是新发现的(这里不考虑IE5了,最值得看的就是第三个):   
  7. test{margin:1px;+margin:2px}   
  8. firefox ->1px  
  9. IE6/IE7 ->2px 
  10.   
  11. test{margin:4px!important;>margin:3px!important;margin:2px;}   
  12. firefox -> 4px  
  13. IE7 -> 3px  
  14. IE6 -> 2px  

TAG css

这里只记录了自己经常忽略的。

1.FF: 设置 padding 后, div 会增加 height 和 width, 但 IE 不会, 故需要用 !important 多设一个 height 和 width
2.cursor: pointer 可以同时在 IE FF 中显示游标手指状, hand 仅 IE 可以
3.ul标签在Mozilla中默认是有padding值的,而在IE中只有margin有值所以先定义ul{margin:0;padding:0;}就能解决大部分问题
4.让高度能自动适应,要在wrapper里面加上overflow:hidden;
当包含float的box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性用zoom:1;可以做到,这样就达到了兼容。
例如某一个wrapper如下定义:.colwrapper{
overflow:hidden;
zoom:1;
margin:5px auto;}
5、margin加倍的问题。 
设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;
例如:#IamFloat{
float:left;
margin:5px;/*IE下理解为10px*/
display:inline;/*IE下再理解为5px*/}

TAG css

DIV+css布局中头/内容/尾/导航/侧栏等的命名规则

» 阅读全文

TAG css

Total:13123Next ›