jquery-ui选项卡的CSS问题

我目前正在为jQuery UI标签的CSS布局挣扎。我使用了两个css，第一个css，我最初放在一起，以获得我想要的标签（请参阅图2）。第二个名为jquery-ui-1.8rc2.custom.css的css被添加用于我在我的网页上使用的警报对话框。现在，如果我使用它们两个CSS的标签将不成比例（看图2）。jquery-ui选项卡的CSS问题

如何避免/绕过/ sovle我目前正在进行的这个CSS问题？

的标签CSS的前景，我想： enter image description here

的标签CSS前景的jQuery-UI-1.8rc2.custom.css distortioned： enter image description here

在我的网站

警告框使用jQuery的UI -1.8rc2.custom.css：

enter image description here

编辑：

这是我tabs.css

<style> 

#page-wrap       { width: 615px; background:#FFF; margin: 10px auto; margin: 0; padding: 0; } 



.ui-tabs       { zoom: 1;} 
.ui-tabs .ui-tabs-nav    { list-style: none; position: relative; overflow:hidden; 
             z-index: 1000; background: #EBEBEB; margin: 0; padding: 0;} 


.ui-tabs .ui-tabs-nav li   { position: relative; float: left; 
             border-bottom-width: 0 !important; margin: 0 0px -1px 0; background: #EBEBEB;} 
.ui-tabs .ui-tabs-nav li a   { float: left; text-decoration: none; padding: 5px 10px ; outline: medium none; font-weight: bold; font-size:11px; line-height: 
30px;} 
.ui-tabs .ui-tabs-nav 
li.ui-tabs-selected     { border-bottom-width: 0; background: #F9AE5C; border-top:1px solid #D4D4D4; border-left:1px solid #D4D4D4; border-right:1px solid #D4D4D4; border-bottom:1px solid #FFF; } 
.ui-tabs .ui-tabs-nav 
li.ui-tabs-selected a, .ui-tabs 
.ui-tabs-nav li.ui-state-disabled a, 
.ui-tabs .ui-tabs-nav 
li.ui-state-processing a   { cursor: text; } 
.ui-tabs .ui-tabs-nav li a, 
.ui-tabs.ui-tabs-collapsible 
.ui-tabs-nav li.ui-tabs-selected a { cursor: pointer; color: #222222; } /* first selector in group seems obsolete, but required to overcome bug in Opera applying cursor: text overall if defined elsewhere... */ 
.ui-tabs .ui-tabs-panel    { padding: 20px; display: block; border-width: 0; background: none; 
             position: relative; min-height: 100px; border: 1px solid #D4D4D4; } 
.ui-tabs .ui-tabs-hide    { display: none !important; margin: 0; padding: 0;} 
.pngIcon{ padding:0px 5px 0px 5px; vertical-align:bottom;} 


a.mover        { background: #900; padding: 6px 12px; position: absolute; 
             color: white; font-weight: bold; text-decoration: none; } 
.next-tab       { bottom: 0; right: 0; -moz-border-radius-topleft: 10px; -webkit-border-top-left-radius: 10px; border-top-left-radius: 10px; } 
.prev-tab       { bottom: 0; left: 0; -moz-border-radius-topright: 10px; -webkit-border-top-right-radius: 10px; border-top-right-radius: 10px; } 
</style>

对于jQuery的UI-1.8rc2.custom.css这里是LINK

来源

2012-07-09 techAddict82

你有一些我们可以看看的代码吗？ – 2012-07-09 22:57:07

@Sean，我已经添加了我的tab.css代码 – techAddict82 2012-07-09 23:03:12

我敢打赌，如果.custom.css是覆盖你的.css规则，你在head部分中调用.custom.css样式表第二个。首先调用custom.css，然后调用你的第二个。稍后调用.css文件应该覆盖样式表之间重复的任何规则。与多个样式表相关的研究“特异性”。

来源

2012-07-09 23:14:32 Brant

谢谢你，我在你的答案中提到了这个术语，并找到了有用的解决方案。 – techAddict82 2012-07-10 00:34:51

jquery-ui选项卡的CSS问题

回答

相关问题