Question

我获得了Twitter-Timeline小部件，为了进一步自定义CSS，我使用jQuery来覆盖一些小部件的CSS规则，如下所示：

function customizeTwitterFeed() {
    $($("iframe").contents()).find("#twitter-widget-0").css({ background: "transparent" });    

    var hentryCss = {
        background: "url('img/bap/hLine_small.png') scroll no-repeat center bottom",
        border: "none",
        color: "#cccccc",
        fontSize: "16px"
    };

    var hentryACss = {
        color: "#5c7f9d",
        textDecoration: "none"
    };

    var timelineHeaderCss = {
        background: "url('img/bap/twitterIcon.png') scroll no-repeat 8px center, transparent",
        paddingLeft: "48px",
        color: "#668995",
        fontSize: "28px"
    };

    $($("iframe").contents()).find(".h-entry").css(hentryCss);
    $($("iframe").contents()).find(".h-entry a").css(hentryACss);
    $($("iframe").contents()).find(".timeline-header").css(timelineHeaderCss);
}

虽然变量hentryCss和timelineHeaderCss中定义的背景样式似乎在Firefox中呈现正常，但它们不会显示，甚至不会在Google Chrome中加载。我在Chrome中打开了元素检查器，发现各个元素都已应用background: url()。我怀疑可能的解决方案是使用!important和我的background-CSS，但我不知道如何使用jQuery的css（）方法发送该参数 - 将其附加到background-property＆＃39; s值字符串仅导致css错误。我也使用背景速记来表示其他元素（虽然在我自己的样式表中），对于那些元素，它在两种浏览器中都能正常工作。

在Firefox 28和Chrome 34中测试。

任何想法都会受到赞赏。

“注入”css背景未在Google Chrome中呈现

0 个答案: