1

我的网站在右侧导航中有一个 Twitter 列，但我已经使用“.twtr-tweet”更改了类，用于语音气泡的白色背景，这在其他浏览器中运行良好，即 Chrome，但不是 IE（测试在 IE9 中）。

如果有人可以使用检查器查看并检查 CSS 以帮助诊断它会非常棒，因为它是实时的并且看起来非常糟糕：

/* Twitter */
#twtr-widget-1 .twtr-new-results, #twtr-widget-1 .twtr-results-inner, #twtr-widget-1 .twtr-timeline {background:transparent !important;}

.twtr-tweet {
    background-color: #Ffffff !important;
    border-radius: 5px;
    box-shadow: 0 0 6px #777777;
    display: inline-block;
    padding: 10px 18px;
    position: relative;
    vertical-align: top;float: left; !important;
    width:60%;}

.twtr-tweet::before {
    background-color: #Ffffff;
    content: "\00a0";
    display: block;
    height: 16px;
    position: absolute;
    top: 11px;
    transform:             rotate( 29deg ) skew( -35deg );
        -moz-transform:    rotate( 29deg ) skew( -35deg );
        -ms-transform:     rotate( 29deg ) skew( -35deg );
        -o-transform:      rotate( 29deg ) skew( -35deg );
        -webkit-transform: rotate( 29deg ) skew( -35deg );
    width:  20px;
}

.twtr-tweet 没有在 IE 中正确注册..

非常感谢，希望有人能帮忙！

4

3 回答 3

1

那是因为你有

#twtr-widget-1 .twtr-tweet{
    background:none transparent scroll repeat 0% 0%;
}

在 index.html 中。

似乎在 IE 上它会覆盖

.twtr-tweet {
    background-color: #FFFFFF !important;
}

在 Structure.css 中（第 129 行）

于 2012-08-25T15:48:42.780 回答
1

我只扫描了你的代码（它太多了）......但这可能会对你有所帮助：

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie"><![endif]-->
<!--[if IE 7 ]><html class="ie7 ie"><![endif]--> 
<!--[if IE 8 ]><html class="ie8 ie"><![endif]--> 
<!--[if (IE 9)|(gt IE 9)|!(IE)]><!--><html><!--<![endif]-->

将其放在您的脑海中，您将拥有可以轻松定位 IE 的父类。如果您发现您的一种样式在 IE 中被覆盖，只需执行以下操作：

.ie7 .your-overwritten-selector {property: 1 !important}

它可能无法解决问题的根源（大多数跨浏览器问题都可以在没有任何条件代码的情况下处理......）但在某些情况下这是必要的。

于 2012-08-25T16:05:35.993 回答
1

您是否尝试过这样做：

#twtr-widget-1 .twtr-tweet {
    background-color: #FFFFFF !important;
}
于 2012-08-25T19:05:56.643 回答