文档章节

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

王尘宇
 王尘宇
发布于 2017/09/06 23:48
字数 759
阅读 4
收藏 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
749
1
html 兼容性问题及一些处理方法(1)

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

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

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

山哥
2012/06/15
81
0
好程序员web前端分享CSS Bug、CSS Hack和Filter学习笔记

CSS Bug、CSS Hack和Filter学习笔记 1)CSS Bug:CSS样式在各浏览器中解析不一致的情况,或者说CSS样式在浏览器中不能正确显示的问题称为CSS bug. 2)CSS Hack: CSS中,Hack是指一种兼容CSS在不...

好程序员IT
05/05
6
0
QSS知识总结

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

tiankefeng0520
2014/05/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

聊聊nacos的notifyConfigInfo

序 本文主要研究一下nacos的notifyConfigInfo CommunicationController nacos-1.1.3/config/src/main/java/com/alibaba/nacos/config/server/controller/CommunicationController.java @Cont......

go4it
昨天
1
0
队列-顺序(c/c++实现)

队列是在线性表功能稍作一改形成的,在生活中排队是不能插队的吧,先排队先得到对待,慢来得排在最后面,这样来就形成了”先进先出“的队列。 队列(顺序)实现的三个步骤: 定义所需的功能(...

白客C
昨天
5
0
安装tomcat部署网站/nginx代理tomcat/tomcat部署多个网站

来源:https://blog.csdn.net/Powerful_Fy 安装jdk: Oracle官方下载 https://www.oracle.com/technetwork/java/javase/downloads/index.html yum安装openjdk: 1.查找可使用的jdk包: [roo......

asnfuy
昨天
4
0
Linux 安装 Android studio

官网下载linux 版本 android xxxxx-xxxx.tar.gz 然后 找到它 解压缩 得到 android-studio文件夹 执行 [root@monkey java]# mv ./android-studio /opt [root@monkey java]# cd /opt/android-s......

MrLins
昨天
6
0
VMware vSphere虚拟机的迁移

VMware vSphere 6.7下,虚拟机的迁移按照移动的内容,可以分为4种: 1)冷迁移(cold migration) 2)热迁移(vMotion) 3)存储热迁移(storage vMotion) 4)完全热迁移(shared-nothing ...

大别阿郎
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部