使用.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}