css - 在 IE9 中输入 HTML5

Question

我希望你能帮助我解决 IE9 中 HTML5 的一些简单问题在我的代码中，我有一些东西:

<input type="text" id="fn" name="fn" placeholder="Street" autofocus/>
---------------------------------------------------------------------
/* INPUT TEXT */
input[type="text"]
{
    border:2px solid #dadada;
    border-radius:7px;
    font-size:16px;
    padding:5px; 
}

input[type="text"]:focus
{ 
    outline:none;
    border-color:#9ecaed;
    box-shadow:0 0 10px #9ecaed;
}

在 Opera、Chrome 和 Firefox 中一切都很好，但在 IE9 中什么都没有...在链接 CSS 文件之前，我尝试在 head 中包含以下行:

<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

你有什么办法解决这个问题吗？此 CSS 在 IE9 中不起作用(在 IE9 中是正常输入)，在 Opera、Chrome、Firefox 中是很好的半径和颜色输入。

Answer 1

我认为 IE9 和 Opera/Chrome/Firefox 之间唯一的不同是它不支持 placeholder HTML5 属性。您可以查看此 jsFiddle 以验证 IE9 中的损坏行为 http://jsfiddle.net/dndrS/并引用 CanIUse查看输入占位符属性的支持。

IE10 确实支持占位符属性，因此您可以升级，或者如果您想支持 IE9，则可以使用以下 polyfill https://github.com/mathiasbynens/jquery-placeholder作者:马蒂亚斯·拜恩斯。这是一个使用 polyfill http://jsfiddle.net/nyTMw/ 的 jsFiddle适用于 IE9

寻找其他 polyfill 的一个方便的网站是 http://html5please.com/