Question

我正在使用 DataTables jQuery插件 TableTools ，并希望将自己的样式应用于那里的按钮。

在Firebug中检查有问题的按钮会显示我们都有一个类“DTTT_button”，我在其中应用了下面的CSS。

这适用于除背景颜色和悬停颜色之外的所有内容，它们根本不会发生变化。任何人都可以告诉我是什么可能导致这个或我必须改变以使其工作？

按钮（锚标记）在Firebug中的显示方式：

<a id="ToolTables_policyTable_0" class="DTTT_button DTTT_button_xls">
    <span>Excel</span>
</a>

我的CSS：

.DTTT_button
{
    -moz-border-bottom-colors:none !important;
    -moz-border-left-colors:none !important;
    -moz-border-right-colors:none !important;
    -moz-border-top-colors:none !important;
    background-color:#F5F5F5 !important;
    background-image:none !important;
    border-color:#BBBBBB #BBBBBB #A2A2A2 !important;
    border-radius:4px !important;
    border-style:solid !important;
    border-width:1px !important;
    box-shadow:0 1px 0 rgba(255, 255, 255, 0.2) inset, 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    color:#333333 !important;
    cursor:pointer !important;
    display:inline-block !important;
    font-size:14px !important;
    line-height:20px !important;
    margin-bottom:0 !important;
    padding:4px 12px !important;
    text-align:center !important;
    text-shadow:0 1px 1px rgba(255, 255, 255, 0.75) !important;
    vertical-align:middle !important;
}

.DTTT_button:hover
{
    background-color:#E6E6E6 !important;
}

非常感谢你提供任何帮助，蒂姆。

Answer 1

它似乎在我的浏览器中工作，我正在使用谷歌浏览器。我不确定，但您的浏览器可能不支持html5。请回复

Answer 2

您可以尝试仅使用IE9样式表。当IE没有正确格式化并且他们添加更多样式来修复问题时，人们会使用这个，这样做可能会影响其他浏览器（如chrome）的外观，这是人们使用仅IE样式表的原因。试试这个......

<!--[if IE 9]>
special event you want to happen here or link to an external stylesheet for a certain    browser
<![endif]-->

或

<!--[if IE 9]>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
<![endif]-->

我希望这可以帮到你。如果您需要其他帮助，请发表评论。

Answer 3

我找到了一个可以解决问题的解决方案，适用于所有主流浏览器：不需要单独的IE9样式，而是添加了filter：none！important。

CSS / TableTools：按钮背景颜色不会改变

3 个答案: