У меня есть форма , в которой используются различные изображения 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>
Любые предложения очень ценятся.