一个游戏群里的同事提到一个Bug, 在他的页面里, 实际内容是超过了6000px的, 而且给包含内容的容器加了个border: 1px dotted #fff, 这时在chrome中就发现左右边框消失了!!!
如果你的是chrome, 点击这里查看demo. 这个问题相当诡异, 如下:
1. 改成2px, border出来了!
2. 改成solid, 又出来了!
3. 高度低于4096, 呃, 又出来了…不过还是少了一些点, 改成4095就很正常了…
暂时还没有找到解决办法, chrome处理超过2的40次方之后的数字溢出了, chromium的项目里已经看到有人提了bug, 但是到目前为止(chrome 12.0.733.0)依然如此. 也许某天google大神心情好了, 会fix它吧. ╮(╯_╰)╭
====== 2012-4-22 update ======
神奇的发现, 这个bug在mac上的chrome竟然没有出现, 也许只有windows的chrome才会有的bug?
下午在看《ajax权威指南》，看了多级菜单部分，想了想，觉得可以用纯CSS做一个。
用了CSS2的子对象选择符“>”和伪类“hover”，可以IE6不支持子对象选择符，除A之外的标签页不支持hover，所以无视IE6，咱们做web前端的已经被IE6害的够惨的了。
兜远了……直接上图，想要多少级就多少级。
通常开始写css的时候，我都会先link一个reset.css。
所谓reset，就是将html标签的样式都去掉，变成普通的标签的样子如<span>。
要reset的根本原因就是不同的浏览器对同一个标签样式的解析不一致，导致有些css在一个浏览器显示明明没问题，可是到了另一个浏览器则产生多多少少的错位等问题。加入了reset，就要对很多样式重写，即使你想让他保持原来的样子。
但是对于用户产生内容的网站来说，比如Blog，都用到了富文本可视化编辑器，而大部分编辑器都使用了execCommand来实现格式化的。execCommand在不同的浏览器会生成不同的代码，如“粗体”，执行execCommand(‘bold’,null,false);之后，ie会生成<strong>，ff则生成<span style=”font-weight: bold;”></span>，还有浏览器会生成<b>，如果使用了reset，则在ie等浏览器的富文本格式化会变成看起来无效的样子。
另一种情况就是要做对搜索引擎友好的网页时，像<strong>这些标签是很有用的。从语义上就知道<strong>是表示强调内容，一般粗体显示。但是如果reset了，则需要让<strong>里面填充style，或者用个带有style的span把strong里面的内容包括起来，无疑是自找麻烦。
对于这些情况，有两个解决方法：
具体要怎么做就看个人喜好了。
附录：我自己使用的reset.css 跟据YUI库的reset.css和网上一些介绍以及自己的经验改写的。
