文档章节

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

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

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

ShuenWang ⋅ 2017/04/08 ⋅ 0

IE下css bug集合-翻译自haslayout.net

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

山哥 ⋅ 2012/06/15 ⋅ 0

QSS知识总结

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

tiankefeng0520 ⋅ 2014/05/27 ⋅ 0

Layui 1.0.3 发布,经典模块化前端 UI 解决方案

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

贤心 ⋅ 2016/11/10 ⋅ 20

不要告诉我你懂margin

你真的了解margin吗?你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?你知道负margin在实...

freedonn ⋅ 2014/07/20 ⋅ 0

前端开发面试题总结之——CSS3

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

sandisen ⋅ 2017/02/18 ⋅ 0

CSS BUG顺口溜,快速牢记CSS的Bug处理方法

CSS存在Bug,但怎么能让我们记住这些Bug,以便在以后编写CSS代码的时候能很好的应对,这不,有心人就编写了这么一个CSS BUG顺口溜,还是挺不错的: 一、IE边框若显若无,须注意,定是高度设置...

名字已被取 ⋅ 2016/03/02 ⋅ 0

margin系列之百分比

你可能从没注意过它 在 margin系列之keyword auto 中,说过了 值为 的情况,这次要聊的是值为百分比的情形。 我必须承认这是一个非常基础的知识点,但有一段时间我发现很多人对此有错误的认知...

DanielYue ⋅ 2016/08/30 ⋅ 0

EaglePHP v2.2 更新日志

EaglePHP v2.2 发布了,改进记录包括: 1、修复数据库模型对象table()方法支持多表连接别名设置。 2、修复Model对象的join方法与表名连接bug。 3、修复框架在CLI命令行模式下执行删除操作出现...

maoxiaojian ⋅ 2012/11/08 ⋅ 3

Dorado 7.1.20 发布,Ajax的Web开发平台

Dorado 7.1.20 发布,Dorado7的全称是Dorado展现中间件,是一款开源软件,致力于为Web应用提供更加丰富、友好的用户界面,同时大幅提高展现层的开发效率。 Dorado7由三个部分组成:浏览器端的...

vangie ⋅ 2012/11/15 ⋅ 8

没有更多内容

加载失败,请刷新页面

加载更多

下一页

聊聊spring cloud gateway的LoadBalancerClientFilter

序 本文主要研究一下spring cloud gateway的LoadBalancerClientFilter GatewayLoadBalancerClientAutoConfiguration spring-cloud-gateway-core-2.0.0.RELEASE-sources.jar!/org/springfram......

go4it ⋅ 23分钟前 ⋅ 0

详解:Nginx反代实现Kibana登录认证功能

Kibana 5.5 版后,已不支持认证功能,也就是说,直接打开页面就能管理,想想都不安全,不过官方提供了 X-Pack 认证,但有时间限制。毕竟X-Pack是商业版。 下面我将操作如何使用Nginx反向代理...

问题终结者 ⋅ 29分钟前 ⋅ 0

002、nginx配置虚拟主机

一、nginx配置虚拟主机可分为三种方式,分别为: 1、基于域名的虚拟主机,通过域名来区分虚拟主机——应用:外部网站 2、基于端口的虚拟主机,通过端口来区分虚拟主机——应用:公司内部网站...

北岩 ⋅ 32分钟前 ⋅ 0

shell脚本之死循环写法

最近在学习写shell脚本,在练习if while等流程控制时,突然它们的死循环写法是怎么样的?经过百度与亲测记录如下: for死循环 #! /bin/bashfor ((;;));do date sleep 1d...

hensemlee ⋅ 35分钟前 ⋅ 0

苹果的ARKit2.0有多可怕,看了就知道

序言 ARKit主要由三部分组成: 跟踪(Tracking) 跟踪是ARKit的核心组件之一,其提供了设备在物理世界中的位置与方向信息,并对物体进行跟踪,如人脸。 2.场景理解(Scene Understanding) 场...

_小迷糊 ⋅ 36分钟前 ⋅ 0

5.1 vim介绍 5.2 vim移动光标 5.3 ,5.4vim一般模式下移动光标,复制粘贴

vim命令 vim是vi的一个升级版;vim可以显示文字的颜色 安装vim这一个包vim-enhanced 如果不知道安装包,可以使用 命令下面命令来查看vim命令是那个包安装的。 [root@linux-128 ~]# yum prov...

Linux_老吴 ⋅ 39分钟前 ⋅ 0

vim一般模式

vim 是什么 vim是什么 ? 在之前接触Linux,编辑网卡配置文件的时候我们用过了vi ,vim简单说就是vi的升级版,它跟vi一样是Linux系统中的一个文本编辑工具。 如果系统中没有vim ,需要安装一...

李超小牛子 ⋅ 47分钟前 ⋅ 0

docker实战

构建企业级Docker虚拟化平台实战 重点剖析虚拟化和云计算概念; 分析Docker虚拟化的概念和原理; 从0开始实战Docker虚拟化平台; 基于Docker构建Nginx WEB服务器和CentOS虚拟机; 基于开源监...

寰宇01 ⋅ 56分钟前 ⋅ 0

vim介绍、vim颜色显示和移动光标、vim一般模式下移动光标、一般模式下复制粘贴剪切

VIM Vim 是 UNIX 文本编辑器 Vi 的加强版本,加入了更多特性来帮助编辑源代码。Vim 的部分增强功能包括文件比较(vimdiff),语法高亮,全面的帮助系统,本地脚本(Vimscript),和便于选择的...

蛋黄Yolks ⋅ 今天 ⋅ 0

springboot+mockito测试controller层遇到的问题

使用MockitoJUnitRunner测试的一个例子,原来报错无法找到bean, 类似的异常如下:createBeanError..... 原因:是因为@Runwith使用了SpringRunner,应该修改为MockitoJUnitRunner 代码如下: ...

writeademo ⋅ 今天 ⋅ 0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部