input的相关兼容性问题

本文介绍了解决IE浏览器下输入框和密码框宽度不一致的问题,并通过添加类名和设置宽度一致来修复。此外,还澄清了first-child和last-child属性在不同IE版本中的支持情况及常见误解。

  近来在制作登陆页的input文本框和密码框的时候,具体的实例可参考实现带样式的表单验证,我们发现在IE下

    默认的情况下,input 标签的密码框和文本框宽度不一致,这就尴尬了。

解决这个办法,我们是直接设置两个框的宽度一致,

给 input 标签添加一个类,比如:class="input-w"

.input { width:150px;}

 

first-child和last-child属性

IE7,IE8部分支持first-child属性,但不支持last-child属性。目前阶段,直到IE9以上的所有主流浏览器均支持 :last-child 选择器以及nth-child(n)选择器。这几点需要注意。

在这里需要注意——first-child的选择器,它用于选取属于其父元素的首个子元素的指定选择器。

一般的误解有两种:

误解一:认为E:first-child选中E元素的第一个子元素。
误解二:认为E:first-child选中E元素的父元素的第一个E元素。

实现样式:

  照第一种理解,应该只有第一个a元素字体颜色变红,然而事实上全部变红了。这里的解释应该是属于div父元素下(即body元素)的第一个div元素全部变为红色

输出:

照第二种理解,div里的第一个a元素字体应该是红色的,事实证明这种理解也是错的。

正确的理解应该是:只要E元素是它的父级的第一个子元素,就选中。它需要同时满足两个条件,一个是“第一个子元素”,另一个是“这个子元素刚好是E”。

输出:

类似容易误解的结构选择器还有:nth-child()、:last-child、:only-child,在平时的开发中需要注意一下。


转载于:https://www.cnblogs.com/ydaimee/p/6749517.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值