无法在IE7中使用类型属性选择器来设置新的HTML5输入类型 [英] Can't style new HTML5 input types in IE7 with type attribute selectors

问题描述

看起来即使使用shivs，你也不能像IE7中那样做 input [type =search] 来创建新的HTML5输入元素。您可以在 http://jsfiddle.net/2tmAp/ 上查看示例（以IE7模式查看） ）。

It seems that even when using shivs you can't do something like input[type="search"] to style the new HTML5 input elements in IE7. You can see an example at http://jsfiddle.net/2tmAp/ (view it in IE7 modes of course).

据推测，IE7将这些元素设置为 type =text，即使DOM本身同样，这仍然在某种程度上阻止样式的应用。

Presumably IE7 is setting these elements to type="text" and even though the DOM itself is staying the same this still somehow prevents the styles from applying.

什么是最简单的方法来解决这个问题？有什么东西我们可以做的Javascript来欺骗IE7应用样式与shivs工作在元素上相同的方式？

What would be the neatest way to fix this? Is there something we can do in Javascript to trick IE7 into applying the styles the same way as shivs work on elements?

推荐答案

shiv只是一种强制创建新元素的方式，无论是否支持。但是处理类型和属性不同的东西，以及选择器。新的输入的回退是类型文本。这适用于搜索，日期选择器和其他（不能跟踪新的）。

The shiv is just a way to force-create the new elements regardless if supported or not. but addressing the type and attributes it a different thing, as well as the selectors. the fallbacks for the new "inputs" are the type "text". this goes for the search, datepicker, and others (can't keep track of the new ones).

为什么所有主要浏览器中的自动备用功能始终如一：

There are two keys to understanding why the automatic fallback works consistently in all major browsers:

• 输入元素的默认类型为text

• The default type for input elements is "text".
• All browsers ignore unknown attributes.

这两点的后果是，如果您说< input type =foobar =baz/> ，所有浏览器会将此处理为 input type =text/> （，除非foo是可识别的输入类型，bar 。

The consequence of these two points is that if you say <input type="foo" bar="baz"/>, all browsers will treat this identically to <input type="text"/> (unless "foo" is a recognized input type or "bar" is a recognized attribute of the input element).

因为 type =search未知于IE7，到 type =text，您不能在CSS中以 type =search现在 type =text

since type="search" is unknown to IE7, it falls back to type="text" and you can't pick it up in CSS as type="search" since it's now type="text"

来解决您的选择器问题，您可以尝试使用 selectivizr ，它使用JS库的能力做交叉浏览器的选择器匹配（甚至在使用一些伪选择器匹配脚本的不支持的浏览器中）。我不知道他们是否拾起shiv创建的元素虽然。

to address your selector issue, you can try using selectivizr which uses JS libraries' abilities to do selector matching cross-browser (even in non-supporting browsers using a some pseudo-selector matching script). i don't know if they pick-up shiv-created elements though.

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

or better, use the usual way to create a searchbox in HTML/JS as a fallback,

一个简单的答案，我会做其他人评论。只需创建一个名为search的类，并将此类名称应用于所有搜索框。样式，它们与您使用选择器的一样，就像：

for an easy answer, i'd do what the other guy commented. Just create a class named "search" and apply this class name to all your search boxes. style them just the same as the one you used the selector with, just like:

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

<input type="search" class="search" />

这篇关于无法在IE7中使用类型属性选择器来设置新的HTML5输入类型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！