文档章节

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
西安
IE下css bug集合-翻译自haslayout.net

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

山哥
2012/06/15
0
0
html 兼容性问题及一些处理方法(1)

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

ShuenWang
06/26
0
0
Layui 1.0.3 发布,经典模块化前端 UI 解决方案

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

贤心
2016/11/10
4.5K
20
QSS知识总结

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

tiankefeng0520
2014/05/27
0
0
前端开发面试题总结之——CSS3

相关知识点 题目&答案 如何理解CSS的盒子模型? link和@import的区别? CSS 选择符有哪些?哪些属性可以继承?优先级算法如何计算?CSS 3新增伪类有哪些? 如何居中div,如何居中一个浮动元素...

sandisen
2017/02/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

JavaFX WebView概述,很强大,内置了类似Electron的功能

来自 Murali Billa JavaFX技术人员的主要成员 在本博客中,我们将了解JavaFX如何呈现网页及其主要的组件 - 即WebView JavaFX是: 用于创建和交付桌面应用程序的软件平台,以及可以在各种设备...

GuoMengyue
27分钟前
4
0
数据库监控系统小实现1

需求:通过java 去调取python 去目标数据库采集信息,然后插入到数据库,由前台UI显示出来,从而达到监控目的。 设计:通过java的Runtime.getRuntime().exec(args1)方法去调用python脚本,j...

hnairdb
29分钟前
1
0
spring boot logback-spring 配置 日志分文件

因为更规规范化,想将日志分文异常类型,分别存储起来,方便以后查询问题。 以下是 logback-spring.xml 配置: <?xml version="1.0" encoding="UTF-8"?><configuration scan="true"> ...

诺岚
30分钟前
3
0
OSChina 周三乱弹 —— 这下回去要被老婆挠死

Osc乱弹歌单(2018)请戳(这里) 【今日歌曲】 @andonny :分享Passenger的单曲《Let Her Go》 《The Importance of Being Idle》-Noel Gallagher/It's a Cover Up 手机党少年们想听歌,请使...

小小编辑
49分钟前
680
19
RedHat已更改其开源许可规则

对于编程圈外的人来说,软件许可证似乎并不重要,但是,在开源领域,开源许可是非常重要的。 因此,领先的Linux公司Red Hat宣布了一件大事,所有新的由Red Hat发起的使用GNU通用公共许可证(...

linuxCool
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部