【问题标题】:Star hack not working in IE6 AND 8Star hack 在 IE6 和 8 中不起作用
【发布时间】:2011-11-21 00:42:18
【问题描述】:

我的明星黑客不能在 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
}

【问题讨论】:

    标签: css internet-explorer internet-explorer-8 internet-explorer-6


    【解决方案1】:

    star hack 针对 IE7 及更低版本,这解释了为什么它在 IE8 中不适合您。我不能说为什么它不适用于 IE6。我认为 star hack 可以解决这个问题,但由于我们已经放弃了对 IE6 的支持,我已经有一段时间没有考虑它了,所以我可能记错了。

    我想说的是,使用这样的 hack 通常是一个坏主意——十分之九,如果你对 IE6 以外的任何东西使用 CSS hack,那么你做错了什么。即使是 IE6,也最好使用条件 cmets(实际上这点适用于所有版本的 IE)。

    如果您必须使用 CSS hack 来定位 IE,我建议查看 this page,它提供了特定的 hack,您可以使用这些 hack 来定位任何单独的 IE 版本组合。

    如果您的目标是 IE8 及更低版本,那么 \9 hack 似乎是合适的。我仍然会重申我之前所说的话,并建议尽可能不要使用 hacks。

    希望对您有所帮助。

    [编辑]

    它对您不起作用的原因是星号 hack 是在属性上进行的,而不是选择器。

    所以你有这个:

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

    而明星黑客只想要background-color 行上的明星,而不是#searchform 选择器。

    [编辑2]

    更重要的是,您实际上根本不需要在这里使用任何 hack。

    只需先指定纯色后备版本,然后是更高级的版本,浏览器将根据它们支持的内容选择适合自己的版本:

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

    请参阅 - 无需 hack。 :-)

    【讨论】:

    • 好的,我明白了。这仅适用于这 3 个元素,所以我认为 hack 比复制样式表并最终不得不在以后编辑两个样式表更简单。 \9 适用于 IE7 和 8,但又不是 6,我不确定这是否与我试图设置输入提要的背景颜色样式有关,也许 IE6 不允许这样做,有什么想法吗?
    • @Amy - 很可能这就是原因。但是无论如何,您实际上根本不需要破解。只需先指定纯色版本,然后指定 rgba 版本,它就会根据它们支持的内容在所有浏览器中工作。 (我将编辑答案以反映这一点)
    • 嗯,我没有 IE6 的副本来为您测试它,但我很确定它确实支持输入字段的背景颜色。检查您是否处于怪癖模式(但我对此表示怀疑,因为这会给您带来其他问题)。我建议在 IE6 中创建一个仅演示此特定问题的测试页面(创建一个仅包含该字段的基本页面,并仅使用纯色对其进行样式设置,而无需任何 hack 等)。如果它仍然行为不端,请尝试在此处将其作为一个新问题提出。如果它有效,请尝试在它周围添加其他东西,直到它坏掉,看看你是否可以找出导致它的原因。
    【解决方案2】:

    我读过一些关于那些 css-hacks 的文章,但是他们是不是很乱!有一个很好的参考 Wikipedia 可用。

    我建议您在 html 中使用条件 cmets 进行 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]-->
    

    这是关于条件 cmets 的完整指南: http://www.quirksmode.org/css/condcom.html

    【讨论】:

    • 当我尝试这个时,即从不使用它?
    • 应该是“IE 8”,而不是“IE8”。
    • 谢谢,改了。 @Amy 确保样式表 href 指向正确的 css 文件。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2014-01-08
    • 2011-10-29
    • 2014-09-30
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多