无法使用类型属性选择器在 IE7 中设置新 HTML5 输入类型的样式



似乎即使在使用shiv时,也不能像input[type="search"]那样在IE7中为新的HTML5输入元素设置样式。您可以在上看到一个示例http://jsfiddle.net/2tmAp/(当然可以在IE7模式中查看)。

据推测,IE7正在将这些元素设置为type="text",即使DOM本身保持不变,这仍然以某种方式阻止了样式的应用。

解决这个问题最简洁的方法是什么?我们可以在Javascript中做些什么来欺骗IE7以与shiv处理元素相同的方式应用样式吗?

shiv只是强制创建新元素的一种方式,无论是否支持。但对类型和属性的寻址与选择器不同。新";输入";是类型";文本";。这适用于搜索、日期选择器和其他(无法跟踪新的)。

理解为什么自动回退在所有主要浏览器中都能一致工作有两个关键:

  • 输入元素的默认类型是";文本"
  • 所有浏览器都忽略未知属性

这两点的结果是,如果你说<input type="foo" bar="baz"/>所有浏览器都会将其视为与<input type="text"/>相同(除非"foo"是可识别的输入类型或"bar"是输入元素的可识别属性)。

由于type="search"对IE7来说是未知的,所以它会回落到type="text",并且由于现在是type="text" ,所以您不能在CSS中将其作为type="search"

为了解决选择器问题,您可以尝试使用selectivizr,它使用JS库的功能来跨浏览器进行选择器匹配(即使在使用一些伪选择器匹配脚本的不支持浏览器中也是如此)。不过,我不知道他们是否吸收了希夫创造的元素。

或者更好的是,使用通常的方法在HTML/JS中创建一个搜索框作为后备,


为了得到一个简单的答案,我会按照另一个人的评论去做。只需创建一个名为"的类;搜索";并将该类名应用于所有搜索框。将它们的样式与您使用选择器的样式相同,就像:

input[type="search"],input.search{
    /*styles*/
}
<input type="search" class="search" />

最新更新