似乎即使在使用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" />