0

我有一个 WordPress 插件，它是一个 jQuery 选项卡式界面，位于 WordPress 主题侧边栏中。在 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; }

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

工作标签导航

然而，在某些网站上，标签导航被搞砸了，标签导航被扭曲了，看起来像这样：

扭曲的标签

该站点来自欧洲站点，因此文本显示在右侧，这很好，但选项卡导航似乎跨越了整个宽度。

我确信这与选项卡的 CSS 样式有关，但我无法解决。

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

任何帮助将不胜感激，因为我几个月来一直试图解决这个问题。

谢谢

4

1 回答 1

1

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

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

于 2012-09-22T00:08:17.940 回答