Question

我有一个WordPress插件，它是一个位于WordPress主题侧边栏中的jQuery选项卡式界面。在90％的网站上，插件显示，但是在10％的网站上，jQuery标签导航标签CSS样式被另一个插件或主题CSS文件弄乱并覆盖。

这是标签显示方式的一个部分：

<div id="aaw_tabs" style="width:250px !important">

    <ul class="aaw_tabnav">
        <li><a href="#aaw-tabs-popular">Popular</a></li>
        <li><a href="#aaw-tabs-recent">Recent</a></li>
        <li><a href="#aaw-tabs-comments">Comments</a></li>
        <li><a href="#aaw-tabs-tags">Tags</a></li>
    </ul>

    <div class="aaw_tabs_body">

        <div class="inside">

            <div id="aaw-tabs-popular">
                example tab content
                <div class="clear"></div>
            </div>

            <div id="aaw-tabs-recent">
                example tab content
                <div class="clear"></div>
            </div>

            <div id="aaw-tabs-comments">
                example tab content
                <div class="clear"></div>
            </div> 

            <div id="aaw-tabs-tags">
                example tab content
                <div class="clear"></div>
            </div>

        </div>
    </div>
</div>

我用这个jQuery代码初始化jQuery选项卡：

(function($) {
    $(document).ready( function() {

        // Advanced Activity Widget Tabs
        $( "#aaw_tabs" ).tabs({ fx: { opacity: 'toggle', duration: 200 } });
    });
})(jQuery);

这里是用于设置标签样式的CSS：

#aaw_tabs { padding:0 !important; margin:0 auto !important; border:none !important; background:none !important}

ul.aaw_tabnav { position:relative; margin:0 !important; padding:0 !important; list-style-type:none !important; width:100%; }
ul.aaw_tabnav li { display:inline; padding:0 !important; margin:0 !important; border:none !important; background:none !important;  }

ul.aaw_tabnav li a { text-decoration:none; text-transform:uppercase; color:#444; padding:5px; outline:none; font-size:0.8em; font-weight:bold; background:#DDD; border-bottom:none; border-top:1px solid #DDD; text-shadow:0 1px 0 #FFF; -moz-border-radius:5px 5px 0 0; -webkit-border-radius:5px 5px 0 0; border-radius:5px 5px 0 0; background:-moz-linear-gradient(top, #DDDDDD, #CCCCCC); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #DDDDDD), color-stop(1, #CCCCCC)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#DDDDDD', EndColorStr='#CCCCCC')"; /* IE8 only */ filter:progid:DXImageTransform.Microsoft.gradient(startColorStr='#DDDDDD', EndColorStr='#CCCCCC'); /* IE6,IE7 only */}
ul.aaw_tabnav li a:hover { color:#FFF; background:#666; text-decoration:none; text-shadow:0 1px 0 #ccc; }
ul.aaw_tabnav li a:active, ul.aaw_tabnav li.ui-tabs-selected a { text-decoration:none; padding:5px; color:#666; text-shadow:0 1px 0 #FFF; border:1px solid #CCC; border-top-color:#DDD; border-bottom:none; top:1px; background:#EAEAEA; background:-moz-linear-gradient(top, #FFFFFF, #EAEAEA); background:-webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #EAEAEA)); -ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EAEAEA')"; /* IE8 only */ filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#FFFFFF', EndColorStr='#EAEAEA'); /* IE6,IE7 only */}

.aaw_tabs_body { width:98% !important; padding:1%; background:#EAEAEA; border:1px solid #CCC; -moz-border-radius:0 5px 5px 5px; -webkit-border-radius:0 5px 5px 5px; border-radius:0 5px 5px 5px; }
.aaw_tab_single_box { float:left; width:96%; padding:2%; background:#FEFEFE url(../images/bg-box.png) repeat-x; border:1px solid #CCC; display:none; }

.aww_tabs_body .inside { margin:0 !important; padding:0 !important }
.aaw_tabs_body .inside ul { margin:0 !important; padding:0 !important}
.aaw_tabs_body .inside ul li { border-top:1px solid #e5e5e5 !important; float:left; display:inline; font-size:11px !important; color:#595959 !important; margin:0px 1px 0px 0px !important; padding:10px 0px 5px 5px !important; cursor:pointer; border-bottom:none; vertical-align:top !important; width:260px; }
.aaw_tabs_body .inside ul li a { display:block; float:left; padding:0px 7px 10px; color:#595959 !important; font:inherit 11px Arial, Helvetica, sans-serif !important; text-decoration:none !important }
.aaw_tabs_body .inside ul li a:hover { text-decoration:none !important; color:#0088CC !important }

.clear { clear:left;}
.ui-tabs-hide { display:none; }

现在问题是什么。导航有四个选项卡。这就是他们应该看起来的样子：

Working tab navigation

然而，在某些网站上，标签导航混乱，标签导航失真，如下所示：

Distorted tabs

此网站来自欧洲网站，因此文本显示在右侧，但是标签导航似乎跨越整个宽度。

我确信它与标签的CSS样式有关，但我无法解决。

CSS类.aaw_tabs为导航设置样式。它们目前的样式为display：inline。我试过浮动，显示：内联块。

任何帮助都会受到高度赞赏，因为我现在试图解决这个问题几个月了。

由于

Answer 1

您可以复制您认为被覆盖的css选择器，然后更改选择器名称。然后在插件中添加一些js，检查选择器是否已存在于加载的css文件中 - ＆gt;然后，您在第一步中复制的辅助选择器可以将css值添加到插件中。

或者更简单的解决方案，将选择器重命名为非常奇怪（只是名称不常见）的名称，这样它们就不会被复制，然后评论每个选择器在css文件中的作用。

如何阻止jQuery选项卡被覆盖

1 个答案: