使用.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="yourname@domain.com" 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="yourname@domain.com" 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} 

:empty没有在IE低于9支撑，所以整个规则以上将（或应该。 ）在所有版本低于9的IE中完全忽略。

我不确定它为什么在IE7中仍然适合你。 IE7很疯狂。

从the spec：

当用户代理无法分析选择器（即，它不是有效的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}