文档章节

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

王尘宇
 王尘宇
发布于 2017/09/06 23:48
字数 759
阅读 3
收藏 0
受影响版本 该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-left: 100px;
  3.     width: 100%; /* gives "layout" */
  4. }
现在,我们有一个拥有布局并且设置了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-left: 100px;
  3.     width: 100%; /* gives "layout" */
  4. }
条件注释代码:
  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

© 著作权归作者所有

共有 人打赏支持
王尘宇
粉丝 1
博文 450
码字总数 469557
作品 0
西安
私信 提问
IE6滴FUCK-BUG

1 IE6中绝对定位位置错误 BUG 在ie6中 . 如果参照物没有触发haslayout . 那么“绝对定位的容器”的left和bottom就会有问题 解决 在“相对定位的父容器”上加入 zoom:1 来触发ie的haslayout即...

硕鼠宝
2014/03/22
739
1
html 兼容性问题及一些处理方法(1)

兼容性问题: 计算一定要精确 要要让内容的宽度超出我们设置的宽高,在IE6下,内容会撑开设置好的宽高;; 在IE6元素浮动,如果宽度需要内容撑开,就给里面的块元素都加浮动; 在IE6,7下元素...

ShuenWang
06/26
0
0
IE下css bug集合-翻译自haslayout.net

概述 IE浏览器以不支持大量的css 属性出名,同时也因其支持的css属性中存在大量bug。 本页列举了IE下的一些问题,实例样本和一些我们已知的解决方法。 尽管我已经尽力按照它们本来的性质对它...

山哥
2012/06/15
0
0
QSS知识总结

QT样式表单 QT的样式表单允许我们在对程序不做任何代码上的更改的情况下轻松改变应用程序的外观。 其思想来源于网页设计中的CSS,即可以将功能设计和美学设计分开。 它的语法和概念和HTML CS...

tiankefeng0520
2014/05/27
0
0
Layui 1.0.3 发布,经典模块化前端 UI 解决方案

Layui 1.0.3 发布了。 更新日志 集成 layer 3.0 重点增加导航菜单的二级菜单支持(水平导航和树形导航都支持) 表单select增加optgroup的分组支持 富文本编辑器新增获取选中内容的方法:lay...

贤心
2016/11/10
4.7K
20

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部