IE CSS Bug系列:IE8中按钮使用Auto-Margin居中失效

伯乐在线导读:IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有 58 个指南,70 个解决方案。这篇由伯乐在线前端开发小组的@daozen 翻译。(欢迎更多前端开发朋友来加入“前端开发小组。)

【提示】:IE CSS BUG 系列译文正在进行中,后续或有改动和调整,请不要转载本系列的译文

—————————————————————————–
影响版本

该bug影响:IE8

表现

当按钮类元素应用样式{ display: block; margin-left: auto; margin-right: auto; } ,并且没有详细设置width值之时,按钮类元素不居中。

教程时间

2009.8.19 10:22:23

描述

这是我在Gérard Talbot的IE8 Bug集合里面找到的bug,不过我要更正说明一下:这个bug不会在所有的inline元素发生,而仅仅会出现在按钮(例如<button>和type=”button”、type=”submit”的<input>元素)。进一步说,考虑到规范一致性的话,这甚至连一个bug都算不上,因为在w3c标准里面说明:“css 2.1不会定义表单控件和框架的属性应用,也不会定义怎样用css去进行样式化。客户端自己可能会对这些元素应用css属性。”(http://www.w3.org/TR/CSS21/conform.html#conformance)。但是,这个bug并不会在更早版本的IE上出现,正常的浏览器也会将按钮居中,所以让我们来看一下状况:

 

示例

这个示例在一个独立的页面

HTML代码

CSS代码

在这个示例中,正常浏览器和IE6、IE7中的<button>元素以及<input>按钮控件(type=”submit” 、type=”button”)都和其他表单控件一样被居中。但是到了IE8这里这种方法却被认为是错误的,尽管设置margin-leftmargin-right的值为auto和display属性设置为block(按钮被替换,因此按钮有内在尺寸),但按钮依然左对齐。

 

解决方法

以下是以类型安排的解决上述bug的方法。

 

解决方法(简洁方案)

解决时间

2009.08.19 10:43:21

解决浏览器版本

所有受影响的版本

描述

这只能算是一种头痛医头的方法,但是这的确能解决上述的bug,假如你只有几个按钮的话也能算是一种可行的解决方法,让我们来看看:

修复版本在独立的页面

HTML代码

CSS代码

标记部分保持不变,我只是简单地在CSS里面定义了按钮表单控件的width。如果你不喜欢这种使得其他浏览器里面的按钮宽度被定义的方式,可以通过条件注释的方法来使用。

这种方法的缺点在于你需要考虑到每个按钮的宽度——在我的示例里面,三个按钮的文字都一样,所以我对所有按钮都应用了同样的宽度。

 

解决方法(Javascript方法)

解决日期

2009.8.19 11:17:13

解决浏览器版本

所有受影响的版本

描述

如果你有成千上万的个按钮及其他方法的不适用的话,你可以考虑一下Javascript的方法。注意:我很清楚把JS代码放进IE私有的expression()和保留在CSS文件的话同样也是同一种方法;但是,同时执行上千次的话会弊大于利——这只是一个提醒,只需要做你认为合适的就好。让我们来看看这个示例。

修复版本在独立的页面

HTML代码

CSS代码

JavaScript代码

HTML和CSS保持不变。这段JS代码的作用在于找到按钮表单控件,判断它们的宽度,并将这宽度作为CSS样式。很简单。

 

解决方法()

解决日期

2009.8.19 10:22:41

解决浏览器版本

所有受影响的版本 

描述

这个方法可能会打破你对按钮设置{ display: block; margin: 0 auto;}的原因,尽管如此,它还是带来了曙光。让我们来看看。

修复版本在独立的页面

HTML代码

CSS代码

条件注释代码

我们来分析一下这个方法。首先,我们对<input> type=”button” 和 type=”submit”的修改同样可以用于<button>;我对<button>展示另外一种方法是因为它不需要额外的标记,不过该方法对其他bug不起作用。

在<button>上我设置其display属性为table。这可以让它居中,不过同时这也破坏了在Opera中的居中,这也是为什么这个方法要用在以IE8为目标的条件注释里面。

按钮<input>的解决就更为复杂了,我在每一个按钮都用额外的<div>来包围,把该<div>设为居中,同时将这些被<div>定位的<input>设为{ display: inline-block; }。这样你仍然可以在你需要的时候改变它们的宽度,同时也使它们可以对对齐方式进行响应。

收藏 评论

关于作者:道禅

当一切都看起来无济于事的时候,我去看一个石匠敲石头.他一连敲了一百次,石头仍然纹丝不动.但他敲第一百零一次的时候,石头裂为两半.可我知道,让石头裂开的不是那最后一击,而是前面的一百次敲击的结果。(新浪微博:@卍道禅卐) 个人主页 · 我的文章

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部