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

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

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

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

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