南芝 – 我才12岁（孤独、快乐的生活在自己的世界里）

一个多月来的新淘江湖项目中，遇到了各种各样奇怪的东东，在这里记录一下哈~

首先是编辑器问题。。。被有脚鄙视了无数次了。。。囧~

1.text-indent与inline-block元素：

场景：

当text-indent使用在inline-block元素上时

问题：

在ie6下，将出现元素跟随text-indent左移的问题，其它浏览器正常。

解决方法：

不使用text-indent，改用font-size:0和line-height:200px。当此元素position:absolute时，表现正常。

如图：

Demo:点击查看

2.legend：

legend是一个十分怪异的东东，我一般很少很少去触及它，因为它真的很难搞，这次一不小心发了善心，结果它给我带来了各种各样的奇怪问题。

legend是fieldset元素的定义标题，fieldset可将表单内的相关元素进行分组，当然是用fieldset可实现一些特殊的效果，但是各浏览器对legend的呈现不一，给我们的使用带来了诸多麻烦。

1)legend的重置：legend需要重置margin、padding、color，但是IE6、IE7下的legend的margin-left需要设置为-7才能和其它浏览器呈现统一。

2)看图，legend和fieldset的位置，忘记了曾经遇到什么问题了。。。反正就是这个东西闹的。。。

3)IE下legend死活不换行，Opera、Chrome、Safari下会自动换行，Firefox下需要给legend定义white-space:normal来搞定。

4)给legend加postion:relative后，Opera下会没入fieldset中，跟IE下相同，但是legend的换行依然有效。

Demo地址：点击查看

3.IE不支持url中文的自动转码~

4.需要小心type=”submit”的按钮：

如果需要为其注册submit事件，最好注册到form上，倘若在按钮上定义click事件，那么在用户使用enter时会出现问题。

5.IE7 的hover：

IE7 是支持hover伪类的，但是不管是用伪类，还是用js的mouseenter，它都会有一个问题，就是你必须将鼠标放到一个有东东的地方才会触发，也就是说，当你经过空白的时候是不会触发hover的，但是经过visibility:hidden的东东上时可以触发。解决的方法是给盒子加一个背景~此问题仅在ie7下有，很是怪异！

6.label中的img：

一直以来以为ie6下，点lable中的img不会选中input，以前也是通过脚本去实现的，但是这次江湖项目中，康安告诉我可以通过给img加一个disabled属性来实现，果然如此，大家不妨一试哈~

7.多行浮动元素的显、隐：

比如一个ul里有很多歌li，每个li都是浮动的，而且会出现几行几列，这时候如果隐藏其中的某一个li，在ie6下就会造成列表的错乱，解决的办法是：隐的时候将li的width、height、margin、padding进行重置，显示的时候移除所有内联样式。之前遇到过这个问题，没有记录。。。这次又遇到了。。所以必须要记录下哈~

8.全局的一些东西的设定：

在项目之初一定要定好这些全局的东西，否则在项目进行中或者后期再去订，成本真的好高哦。比如line-height、word-break、z-index等，特别是z-index，每次最让人头疼的就是z-index，其实我一直主张是尽量小的去使用，有时候我们会想当然的去定一个非常非常大的数，以为这就是最高的，但是其实有时候并不是这样的，有时候我弹出之上还是有弹出的，这样一来，争相去定大的。。。越发不可收拾。。。然后是word-break的问题，应尽早确定是否在全局使用，否则后期加还是会造成蛮多问题的。

9.Flash的路径：

在ie下如果填一个空的路径的话，左下角的状态栏会一直显示正在加载，永远都加载不完，如果需要页面里放置一个空的flash的话，需要将其路径值设为null。

10.项目过程中难免会遇到一些问题，应该随手记下来，可以用OneNote或者Opera的笔记，比较方便，最好稍微详细一点。。。其实我还有很多其他问题。。。但是由于记录不全，无法测试再现。。。悲剧啊。。。

所测试浏览器版本：Opera 10.10 Beta 1792、Firefox 3.5.3、Chrome 3.0.195.21、Safari 4.0.3(531.9.1)。

标签： hover, inline-block, label, legend, text-indent

这篇文章发布于 2009年09月24日，星期四，21:51，归类于 CSS, HTML。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。