IE CSS Bug系列:表单控件双边距BUG

开发 前端
IE 浏览器不支持很多 CSS 属性是出了名的,即便在支持的部分中,也是有很多 Bug 的。Zoffix Znet 整理了 IE 中的 CSS 问题,有简单的问题示例,也有解决方法。 这个系列共有58个指南,70个解决方案。

受影响版本

该BUG影响:IE7、IE6

表现

<input>和<textarea>元素会从用拥有边距(margin)属性和布局的父节点继承水平方向的边距(margin)属性。

教程日期

2009-08-17 22:37:49 星期一

描述

这是我在Gérard Talbot 的 IE7 BUG 集合页上发现的另外一个BUG。 双边距 Bug现在有了新的表现,而且在IE7下也出现了。现在它主要的表现是影响了<input>和<textarea>元素。让我们来看一下示例。

示例

示例在一个单独页面上。

注意:虽然该演示显示了合法的HTML标记,但它并不是创建HTML表单的合适方法,本演示只是一个简化的版本。

HTML 代码:

  1. <form action=""> 
  2. <div> 
  3.     <input type="text" name="ber"> 
  4.     <textarea cols="10" rows="5" name="baz"></textarea> 
  5.     <select name="ber"><option>foo</option></select> 
  6. </div> 
  7. </form> 

CSS 代码:

  1. div { 
  2.     margin-left100px
  3.     width100%/* gives "layout" */ 

现在,我们有一个拥有布局并且设置了margin-left属性的父节点。在IE6与IE7中,<input> 和<textarea>元素的表现看起来就好像它们从父节点<div>那里继承了margin属性一样,这样它们的margin 属性的值就是双重叠加的。在父节点上设置margin-right属性结果也是一样的。在功能更健全的浏览器中,<input> 和<textarea>元素在垂直方向上应该和<select>对齐。

 

解决方案

下面是按照解决方案类型排序的对上述问题的解决方案。

解决方案(条件注释解决方案)

解决方案日期

2009-08-17 22:37:49 星期一

修复版本

所有受影响版本

描述

对于本BUG的修复是一个相当暴力直接的解决方案。让我们一起看一下: 修复后的实例在一个单独页面上。

HTML 代码:

  1. <form action=""> 
  2. <div> 
  3.     <input type="text" name="ber"> 
  4.     <textarea cols="10" rows="5" name="baz"></textarea> 
  5.     <select name="ber"><option>foo</option></select> 
  6. </div> 
  7. </form> 

CSS 代码:

  1. div { 
  2.     margin-left100px
  3.     width100%/* gives "layout" */ 

条件注释代码:

  1. <!--[if lte IE 7]> 
  2.     <style type="text/css"> 
  3.         input, 
  4.         textarea { 
  5.             margin-left: -100px; 
  6.         } 
  7.     </style> 
  8. <![endif]--> 

让我们来分解一下我在这里的解决办法。这个是迄今为止我发现的唯一一个解决方案。我通过使用条件注释来针对IE6和IE7做了处理,您也可以选择任 何您喜欢的方式来达成这个目标。对于这些特定版本的IE浏览器,我为<input>和<textarea>设置了与父节点中的 margin-left属性值大小相等,符号相反的margin-left值。现在,在受该BUG影响浏览器中,所有的元素都像他们应该表现的那样, 与<select>元素在垂直方向对齐。该方案对于margin-right来说同样适用。

注释:你可以直接使用我在CSS里定义的选择条件,这不算恶意侵权。要确保修正其中margin的负数,把它只应用到和这个bug相关的表单元素中。

原文链接:http://haslayout.net/css/Form-Control-Double-Margin-Bug

译文链接:http://blog.jobbole.com/47526/

责任编辑:陈四芳 来源: 伯乐在线
相关推荐

2013-10-30 09:57:43

IECSS

2013-09-09 10:51:07

CSSIE浏览器

2013-10-28 14:01:03

IECSS

2013-10-31 10:59:23

IECSS

2013-10-29 15:20:38

IECSS

2010-08-27 09:02:22

IE6margin双倍

2013-10-29 10:32:59

IECSS

2009-08-13 10:12:07

IE的CSS Bug

2010-09-03 09:55:10

CSS伪类hover

2010-08-17 15:38:49

CSS兼容IE7IE8

2009-03-28 09:50:02

IE8微软浏览器

2010-08-18 09:55:38

IE6

2013-09-22 09:55:14

2014-05-22 16:32:48

bug查找bug

2010-09-02 11:03:48

CSS

2014-11-14 14:03:17

微软安全漏洞bug

2016-12-13 10:57:22

Bug程序员错误报告

2010-08-26 12:59:29

marginCSS

2010-09-08 11:23:27

2020-10-22 07:09:19

TCP网络协议
点赞
收藏

51CTO技术栈公众号