.lt-ie9 类针对 IE6/7/8 —不支持 IE8

Question

我有一个 form，它在每个字段中使用各种 PNG 图像，根据进展情况使用伪类进行切换填写该字段以及该字段是否不是验证必填字段。

IE 对伪类的支持几乎不存在，这并不是什么大问题，只要我可以在所有浏览器中显示基本图标，尽管无需切换以反映 IE6/7/8 中字段状态的变化。

但是，我对以下图像的 CSS 存在问题：

#contact input#url:empty,.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}

基本上，仅使用 #contact input#url:empty 选择器，当页面在 IE6-8 中加载时，它根本不会显示。通过添加 .lt-ie9 #contact input#url 选择器，它可以在 IE6 和 IE7 中正确显示，但由于某种原因，在 IE8 中无法显示。

HTML 如下（CSS 位于：http://i.via.dj/EOma）：

<div id="contact-form">

<form id="contact" class="clear" method="post" accept-charset="utf-8" novalidate="novalidate">

<fieldset>

<input type="text" name="checking" placeholder="[email protected]" class="hidden" id="checking">
<label for="checking" class="hidden">If you do not want to submit this form, enter your email in this field</label>

<p class="name">
<input type="text" name="name" placeholder="John Doe" title="Enter your name" required="required" id="name">
<label for="name">Name *</label>
<label class="error" for="name" id="name-error">Name is required</label>
</p>

<p class="email">
<input type="email" name="email" placeholder="[email protected]" autocapitalize="off" title="Enter your e-mail address" required="required" id="email">
<label for="email">Email *</label>
<label class="error" for="email" id="email-error">Type a valid email</label>
</p>

<p class="website">
<input type="url" name="url" placeholder="http://" autocapitalize="off" id="url">
<label for="url">Website</label>
</p>

<p class="message">
<textarea name="message" placeholder="Type your message here (max. length 1,200 characters)" title="Enter your comment or message" required="required" id="message" maxlength="1200"></textarea><label for="message">Message *</label>
<label class="error" for="message" id="message-error">You haven't typed a message</label>
</p>

<p class="submit">
<input type="submit" value="Send message" />
</p>

</fieldset>

</form>

任何建议都非常感激。

Answer 1

其中的选择器不会按照您的预期运行：

#contact input#url:empty,.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}

低于 9 的 IE 不支持 :empty，因此上面的整个规则将（或应该..）在所有低于 9 的 IE 版本中都被完全忽略。

我不确定为什么它在 IE7 中仍然适用。 IE7 太疯狂了。

来自规范：

当用户代理无法解析选择器时（即，它不是有效的 CSS
2.1)，它也必须忽略选择器和后面的声明块（如果有）。

要解决您的问题，请尝试将其分为两个规则：

#contact input#url:empty{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}
.lt-ie9 #contact input#url{background:url(url-icon.png) no-repeat left center;margin-bottom:24px}