给 OSChina 前端提建议

ValueError 发布于 2011/06/24 22:00
阅读 758
收藏 3

给 OSChina 前端提一点建议哈~请大湿们评价或拍砖

  1. 能不浮动尽量不浮动

    这个是由一个截图想到的(浏览器 Chromium 12)

    float 遇到边距变化引起的乱版

    我用 firebug 把 li 上的 float 属性去掉,并删除下面的 clear 元素,然后给 li 加上 display:inline-block 后,排列正常了。

    float 的浏览器兼容性好,几乎所有浏览器都支持。但是一个比较严重的问题,就是 float 的本质是让元素脱离 stream,所以对宽度、高度、边距等极为敏感。而不同浏览器的盒模型不同,1-5px 的偏差都是非常难免的,所以 float 很容易出事。

    相比之下,inline-block 虽然对 IE 9 以前的版本很不河蟹,但是其使用的是正常的元素 stream,而又能达到和 float 的同样效果——像 block 元素一样可以固定宽高设置边距,又像 inline 元素一样不自动断行。

  2. 即使浮动,也用优雅的方式清除浮动

    一般使用浮动之后必须清除浮动,否则后面的所有元素都会一起浮动起来 = =|||

    观察发现 OSChina 用的比较多的也是最常用的清除方式——在被浮动元素的最后,添加一个空的 div,给其一个 clear:both 属性。这样做的坏处是添加了一个没有意义的元素(这个理由很牵强),以及把页面结构弄得很脏(对于代码洁癖者来说)。更加麻烦的是,有时候不得不在一些不该添加 div 的地方添加 div —— 还是上面这张图,我看到为了清除浮动,是在 ul 的里面包了一个 div 的。

    其实清除浮动有一种更加优美的方式,就是在父级元素添加一个 overflow 属性。一般我比较喜欢用 overflow:hidden。当然,这个的弊端是 IE 6 不支持。(下文有说解决方法)

  3. 特殊问题,特殊处理

    上面的方案最大的问题就是要命的 IE,好一点的 IE6 不兼容,麻烦一点的 IE8 都不兼容。

    不过如果不考虑 IE ,其他浏览器下上述方式兼容性都很好。所以,IE 可以视为一种特殊情况处理。

    我建议,对 IE 可以写特殊的 iefix.css 修复脚本,然后通过条件注释添加到页面中。

      <link rel="stylesheet" href="/styles/common.css?ver=20110516" charset="utf-8" type="text/css" /> 
      <link rel="stylesheet" href="/styles/index.css?ver=20110609" charset="utf-8" type="text/css" /> 
      <link rel="stylesheet" href="/styles/tips_msgbox.css" charset="utf-8" type="text/css" /> 
      <!--[if IE]><link rel="stylesheet" href="/styles/ie_fix.css?ver=20110331" charset="utf-8" type="text/css" /><![endif]--> 

    这样既能保证 IE 用户的正常浏览,又能对其他浏览器用户不产生影响。比如上面说的两点都可以通过这种方式解决 —— 第一条的 inline-block 元素,可以在 iefix 中补充 float 和 overflow 清除浮动。而对 IE6 不支持 overflow 清除浮动的问题,可以在 iefix 中给使用了 overflow 的元素再添加一个属性: ZOOM:1。

综上方式,把特殊情况打包起来,这样对其他浏览器就只是一条 HTML 注释,而 IE 用户又能兼容。 做完这些,直接的好处就是能轻易通过 W3C 认证。通过认证之后,不仅可以 装13 ,还能方便搜索引擎收录。而最大的好处,是可以帮助障碍人士使用读屏工具。

好吧其实我是在宣扬大家遵循 W3C 标准又不得罪伤不起的天朝 IE 用户……

加载中
0
红薯
红薯
谢谢建议,这个页面从老版本直接迁移过来一直没时间改造,看来个人空间是需要再优化优化了
0
Xingjian_Xu
Xingjian_Xu

红薯是前端后端两手抓,两手都要硬啊

这么多活,红薯一个人干也够累的,好像他还有个正式工作

h :: scroll left
返回顶部
顶部