Я использую ввод type='submit' с примененными правилами CSS, которые делают фон градиентным темно-синим и цвет шрифта белым. Я не могу заставить эти входные данные последовательно отображаться в IE 8. В некоторых частях моего сайта он выглядит просто отлично, с его прекрасным белым шрифтом. В других частях цвет, назначенный телу, превосходит белый, применяемый правилами CSS.
Я провел немало исследований по этому вопросу и не могу найти решение, которое работает. Тот, который я нашел на CSS Tricks, рекомендовал добавлять CSS с помощью jQuery. Я попробовал это. Я успешно добавил встроенный стиль, но IE8 все еще превзошел мой белый. Я переключился в режим совместимости и все еще не играл в кости. 0
Почему?
Вот соответствующая разметка и CSS.
CSS
body {
color:#222;
font-size: 12px;
width:100%;
background:#8A7967 url(images/bg_body.png) top left repeat-x;
}
.buttonBigBlue,
input[type="submit"] {
color:#FFF!important;
-webkit-border-radius:12px;
-moz-border-radius: 12px;
border-radius:12px;
padding:3px 9px;
text-transform:uppercase;
font-weight:bold;
text-align:center;
vertical-align:middle;
border:1px solid #74a1a9;
cursor:pointer;
background: #678382; /* for non-css3 browsers */
background:-webkit-gradient(linear, left top, left bottom, from(#77A7B1), to(#678382));
background:-moz-linear-gradient(top, #77A7B1, #678382);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382'); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#77A7B1', EndColorStr='#678382')"; /* IE8 */
}
MARKUP
<input type="submit" class="buttonBigBlue" id="login" value="Login" name="login">
Эта кнопка отображается с текстом # 222 в IE8.
<input type="submit" class="buttonBigBlue" id="saveChanges" value="Save Changes" name="saveChanges">
Эта кнопка отображается с текстом #FFF в IE8
ОБНОВЛЕНИЕ после дальнейшего расследования.
Содержащий div для входов, которые не отображаются должным образом, называется #loginBox. Это стили это:
#loginBox {
width:300px;
margin:25px auto;
padding: 25px 30px 30px;
border:1px solid #c9b9a8;
-webkit-border-radius:9px;
-moz-border-radius: 9px;
border-radius:9px 9px 9px 9px;
-webkit-box-shadow:rgba(0,0,0,.3) 4px 4px 6px;
-moz-box-shadow: 4px 4px 6px rgba(0,0,0,.3);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845')";
/* For IE 5.5 - 7*/
filter: progid:DXImageTransform.Microsoft.Shadow(Strength=6, Direction=135, Color='#544845');
min-height:160px;
background-color:#fff;
box-shadow: 4px 4px 6px rgba(0,0,0,.3);
}
Когда я удаляю -ms-фильтр и правила фильтрации, которые устанавливают тень блока, входной текст возвращается в белый цвет.