Звездный взлом не работает в IE6 и 8 - PullRequest
1 голос
/ 20 сентября 2011

Может ли что-то помочь, мои звездные хаки работают в IE6 и 8 для этих элементов формы, которые я пытаюсь стилизовать?Но это странно работает в ie7?

Я попытался добавить звездочку напротив селектора класса в целом, что заставило его работать в IE8 и 7, но все еще не 6, а затем заставил * применить к firefox, safari,Chrome и т. д., что означает, что звезда применялась ко всем браузерам, которые мне не нужны, просто к Internet Explorer.

Любая помощь, пожалуйста?

/* FORMS */

/*SEARCH*/

#searchform .s, #searchform .but{float:left;}

#searchform .s{
background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);margin-bottom: 10px; border: none;  padding:10px;width: 140px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686; 
}

#searchform .but
{
background-color:rgba(128, 129, 132, 0.4);  margin-bottom: 10px; border: none;  padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}

/* IE HACK */

*#searchform .s{
*background-color:#C3C3C4;
}

*#searchform .but{
*background-color:#C3C3C4;
*height: 35px
}

/*FIREFOX btn HACK*/    
#searchform .but::-moz-focus-inner {
    padding: 0;
    border: 0
}

/* MAILING LIST */

#mc_embed_signup #mce-EMAIL, #mc_embed_signup #mc-embedded-subscribe{float:left;}

#mc_embed_signup{margin-top: 10px;  
background-image: url(images/ieblue.png); }
#mc_embed_signup #text { padding: 8px 5px 8px 8px;
font-family: Helvetica, Arial, Sans-serif; font-size: 10px; line-height: 14px; font-weight: bold; color: #FFFFFF;}
#mc_embed_signup .asterisk {color: #FFFFFF}
#mc_embed_signup #mce-EMAIL {background-color:rgba(0, 173, 238, 0.6);background-image: url(images/line2.png);
margin-bottom: 10px; border: none;  padding:10px;width: 158px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #FFFFFF; }
#mc_embed_signup #mc-embedded-subscribe {background-color:rgba(0, 173, 238, 0.6);  margin-bottom: 10px; border: none;  padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#FFFFFF;
}

/* IE HACK */
* #mc_embed_signup #mce-EMAIL{
*background-color:#60c7ee;
}
* #mc_embed_signup #mc-embedded-subscribe{
*background-color:#60c7ee;
*height: 35px
}

/*FIREFOX btn HACK*/    
#mc_embed_signup #mc-embedded-subscribe::-moz-focus-inner {
    padding: 0;
    border: 0
}

#hidemap{
display: none;}

/* DIRECTIONS */
#daddr #saddr{float:left;}


#saddr {background-color:rgba(128, 129, 132, 0.4);background-image: url(images/line.png);
margin-bottom: 0px; border: none;  padding:10px;width: 158px; ;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px; font-weight: bold; color: #868686;}
#saddrbut {background-color:rgba(128, 129, 132, 0.4);  margin-bottom: 0px; border: none;  padding:10px;width: 30px;
font-family: Helvetica, Arial, Sans-serif; font-size: 12px;font-weight: bold; color:#00ADEE;
}

*#saddr{
*background-color:#C3C3C4;
}

*#saddrbut{
*background-color:#C3C3C4;
*height: 35px
}

/*FIREFOX btn HACK*/    
#saddrbut::-moz-focus-inner {
    padding: 0;
    border: 0
}

Ответы [ 2 ]

2 голосов
/ 20 сентября 2011

Звездный хак нацелен на IE7 и ниже, что объясняет, почему он не работает для вас в IE8. Я не могу сказать, почему это не работает для IE6; Я думал, что «звездный взлом» сработает, но, поскольку мы отказались от поддержки IE6, мне не пришлось думать об этом в течение некоторого времени, поэтому я могу не правильно вспомнить.

Я хотел бы сказать, что использование таких хаков, как правило, является плохой идеей - в девяти случаях из десяти, если вы используете хакерский CSS-код для чего-либо, кроме IE6, вы делаете что-то не так. Даже для IE6 лучше использовать условные комментарии (фактически этот пункт относится ко всем версиям IE).

Если вы должны использовать CSS-хаки для таргетинга на IE, я предлагаю посмотреть эту страницу , которая дает конкретные хаки, которые вы можете использовать для нацеливания на любую отдельную комбинацию версий IE.

Если вы нацелены на IE8 и ниже, то взлом \9 может показаться уместным. Я все еще повторю то, что сказал ранее, и рекомендую вообще не использовать хаки, если это вообще возможно.

Надеюсь, это поможет.

[EDIT]

Причина, по которой он не работает для вас, заключается в том, что взлом звезды влияет на свойства, а не на селектор.

Итак, у вас есть это:

*#searchform .s{
*background-color:#C3C3C4;
}

в то время как для взлома звезды нужна только звезда в строке background-color, а не селектор #searchform.

[EDIT2]

Что еще более важно, вам вообще не нужно здесь использовать какой-либо хак.

Сначала просто укажите резервную версию простого цвета, а затем более продвинутую версию, и браузеры выберут ту, которая работает для них, в соответствии с тем, что они поддерживают:

#searchform .s{
    background-color:#C3C3C4;
    background-color:rgba(128, 129, 132, 0.4);
    margin-bottom: 10px; border: none;
}

Видите - хаки не нужны. : -)

1 голос
/ 20 сентября 2011

Я немного читал об этих css-хаках, и они грязные! Есть хорошая ссылка на Википедия доступно.

Я бы посоветовал вам использовать условные комментарии в HTML для стиля IE. Он сохраняет все ваши специфичные для IE стили в отдельном файле:

<!--[if IE]>
  <link href="style-ie.css" rel="stylesheet" type="text/css" />
<![endif]-->

<!--[if lt IE 8]>
  <link href="style-below-ie8.css" rel="stylesheet" type="text/css" />
<![endif]-->

Это полное руководство по условным комментариям: http://www.quirksmode.org/css/condcom.html

...