其实怪异的东西并不是真的怪异,只是在不常见而且不符合自己认知的时候,我们就觉得很怪异了(扯吧?哈哈~)

很普通的表单

活动所需信息及喜欢的品牌根据后台设置决定是否显示,看到结构,果断使用 fieldset 和 legend 标签(话说这两个标签自己用的实在不多),惯例先结构后样式,reset margin、padding、border,给 legend 字体加粗,加 border-bottom 等等一系列操作后发现 legend 在 IE6/7 下左边并没有左对齐,存在几个像素的偏移

加上背景后量取为 7px

难道没有 reset 掉吗?还是是浏览器默认有其他设置?检查代码检查浏览器默认样式都没有发现任何造成这 7px 的原因,IE7/8为 padding:0 2px;zoom:1;而 IE6 下只有 zoom:1; google也没能告诉我答案,遂决定去森林群里求解(简单问题不敢问,高深的又不懂,难啊!)

各种询问后得出“这个东西就是这样的,reset没用”。就是无解!纠结啊,就是这样?莫名奇妙的加上7px?仍然不明白哪里造成了这7px,蛋疼了。。。又为什么是7px?不是8px?9px?正是大湿们所说这个就要问浏览器制造商了,再想肯定得心疼胃疼各种痛不欲生。

求解无果就自己慢慢尝试吧,去掉margin,去掉padding,去掉border一个个的来试,总会发现的。当清除 fieldset 的margin padding 保持 border 的时候发现了问题所在,在IE6 7下legend左边横线仍然占有一定的距离,margin:0 并没有清除掉那一点宽度。想来这就是诡异的7px来源吧,量取后果然是7px

明白了,终于踏实了不少。

求知时间不长,但受益蛮多。当自己知道原因后 @linxz 说多换几个系统主题后再看看7px怎么回事。难道这个距离还会随着系统主题的变化而变化?赶紧在虚拟机下XP中切换了经典主题和XP主题(虚拟机XP中只有这两个主题,有空再去下几个主题量量),不过还好仍然是7px,没有变化。

还有关于我问到这两个标签的使用问题,@Along 说只要不纠结于让所有浏览器都一样就照样用,没有什么问题。可能是自己有点小小的完美主义吧,我说不能全部浏览器左对齐可能就要考虑换标签了。这句话确实太偏激了导致了一群人整体蛋疼的出现,但我的意思并不是说不允许浏览器之间存在差异,毕竟要让所有浏览器完全一致(像素级统一)简直是天方夜谭,就像现在做的很多页面或者这个博客都有加入一些CSS3样式属性(圆角、字体阴影等等),我们不可能消耗很大的代价让现有的IE内核浏览器拥有同样的效果,而这些新的属性也只是为了让某些更先进的浏览器看起来效果更好一些,这些属于超出预期的了,因为我们绝大部分的用户并不会用这些先进的浏览器并不会看不到这些效果。而且个人认为作为一名专业点儿的前端攻城师,还原设计稿并不只是要求页面像设计稿,而是我们必须尽可能的让所有浏览器效果接近设计稿,而且浏览器差异也应该在尊重设计师并且得到设计师的许可下才能存在。正如自己所做,放弃某些浏览器的一些效果时首先必须得征询设计师的同意(不然很可能就会成为返回到自己手里要修复的 bug)。

另外回到在所有需要兼容的浏览下 legend 内容左对齐,@Hugo 说可以在 legend 里面再加一个 span 或者其他内联标签然后用绝对定位来实现所有浏览器左对齐,这不失为一个很好的解决办法(如果浏览器差异很大的话可以考虑使用),而且他说的“fieldset legend 是为了结构语义,而 span 是为了表现一致”我也很赞同。

怪异讲完了,这怪异的东西果然不怪异吧,哈哈~ 不同人之间的思维就跟浏览器之间一样不可能做到完全一致,但有差异才会有进步,不管在这个过程是被鄙视,还是被赞赏~总会让自己有所收获~