【发布时间】：2012-03-11 08:42:15
【问题描述】：
我有一个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>
非常感谢任何建议。
【问题讨论】：
标签： css internet-explorer internet-explorer-8 pseudo-class