Star hack 在 IE6 和 8 中不起作用

发布于 2024-12-05 15:24:41 字数 2905 浏览 0 评论 0原文

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

原文

Can somewhere help be, my star hacks arnt working in IE6 and 8 for these form elements I am trying to style? But it oddly works in ie7?

I tried adding the star infront of the class selector in general, which made it work in IE8 and 7, but stil not 6 and then made the * apply to firefox, safari, chrome etc. too which just means the star was applying to every browser which I don't need, just internet explorer.

Any help please?

/* 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
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

寒江雪… 2024-12-12 15:24:41

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

我想说的是，使用这样的 hack 通常是一个坏主意 - 十分之九，如果您对 IE6 以外的任何内容使用 CSS hack，那么您就做错了。即使对于IE6，也最好使用条件注释（事实上这一点适用于所有版本的IE）。

如果您必须使用CSS hacks来针对IE，我建议查看此页面提供了特定的技巧，您可以使用它们来针对 IE 的任何单独组合版本。

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

希望有帮助。

[编辑]

它对您不起作用的原因是星号黑客针对的是属性，而不是选择器。

所以你有这样的：

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

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

[EDIT2]

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

只需首先指定纯色后备版本，然后指定更高级的版本，浏览器就会根据它们支持的内容选择适合它们的版本：

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

请参阅 - 无需破解。 :-)

The star hack targets IE7 and below, which explains why it isn't working for you in IE8. I can't say why it isn't working for IE6; I thought the star hack would work for it, but since we've dropped support for IE6, I haven't had to think about it for some time, so I may not be remembering correctly.

I would like to say that using hacks like this is generally a bad idea -- nine times out of ten, if you're using a CSS hack for anything other than IE6, then you're doing something wrong. Even for IE6, it is better to use conditional comments (in fact this point applies to all versions of IE).

If you must use CSS hacks to target IE, I suggest looking at this page which gives specific hacks which you can use to target any individual combination of IE versions.

If you're targetting IE8 and below, then the \9 hack would seem to be appropriate. I would still re-iterate what I said earlier, and recommend not using hacks at all if at all possible.

Hope that helps.

[EDIT]

The reason it isn't working for you is that the star hack goes on the properties, not the selector.

So you have this:

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

whereas the star hack would only want the star on the background-color line, not the #searchform selector.

[EDIT2]

More importantly, you don't actually need to use any hack here at all.

Simply specify the plain-colour fall-back version first, followed by the more advanced version, and the browsers will pick the one that works for them, according to what they support:

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

See -- no hacks required. :-)

回复收藏 0 原文

暮年 2024-12-12 15:24:41

我读过一些关于 css-hacks 的内容，天哪，它们太乱了！有一个很好的参考
维基百科可用。

我建议您在 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

I've read a bit on those css-hacks, and boy are they messy! There is a good reference on
Wikipedia available.

I would advice you to use conditional comments in your html for IE-styling though. It keeps all your IE-specific styling in a seperate file:

<!--[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]-->

This is a complete guide about conditional comments:
http://www.quirksmode.org/css/condcom.html

回复收藏 0 原文

~没有更多了~