0

我有这个位于屏幕底部的表格（只有一行）的 CSS

#bottomBar td {
filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
padding: 10px !important;
color: white;
border: 2px solid white !important;
font-weightL bold !important;
cursor: pointer;
}

如您所见，过滤器仅适用于 IE 8。我也需要它与 IE 10 兼容，所以我需要删除过滤器并将其替换为，假设

background-color: blue;

给 td 一些颜色。我试过这个

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
$('#bottomBar td').removeAttr('style');
$('#bottomBar td').attr('style', 'background-color: blue; padding: 10px !important; color: white; border: 2px solid white !important; font-weight: bold !important; cursor: pointer;')

但这不起作用，我也尝试过放置

$('#bottomBar td').css('filter','');

在 if IE 10 函数中，但这也不起作用..还有其他想法吗？

请注意，我无法删除或添加类，长话短说我有一个非常长的脚本，如果我添加和删除一个类，代码将会中断。我也不能有外部样式表，抱歉我没有在帖子中提到这一点。（我知道最好只有一个 ie10 样式表，但我正在编写代码的人需要它以某种方式完成）。

4

2 回答 2

3

如果您遇到很多特定于浏览器的样式问题，您可能会考虑的一件事是使用 JS 添加一个body级别类，该类标识有关用户正在使用的浏览器的详细信息。例如：

  • 火狐：<body class="ff">
  • IE10：<body class="ie10">
  • IE7: <body class="ie7 ielt10">( ielt10= "IE, 小于 10" . . . . . . IE 浏览器版本 9 或更旧)
  • 等等

尽管我们都想编写适用于所有浏览器的代码，但我们都知道这不会发生。:) 设置这样的框架可以很容易地在 CSS 中处理特定于浏览器的样式。如果您像这样设置它，那么您可以像这样更改您的 CSS：

#bottomBar td {
    padding: 10px !important;
    color: white;
    border: 2px solid white !important;
    font-weight: bold !important;
    cursor: pointer;
}

.ie8 #bottomBar td {
    filter: progid:DXImageTransform.Microsoft.Gradient(starColorStr=#1c67c0, endColorStr=#03389d);
}

现在，只有 IE8 浏览器会添加该过滤器。

预先设置 JS 需要做一些工作，但是一旦到位，它就可以解决那些必须有解决方法的特定于浏览器的问题，变得容易得多。

于 2013-11-04T19:29:51.270 回答
1

如果我的理解是正确的，您可以执行以下操作：

if (Function('/*@cc_on return document.documentMode===10@*/')()) { // this checks if it is IE 10
    $('#bottomBar td').css('filter', 'none');
    $('#bottomBar td').css('color', 'red');
    $('#bottomBar td').css('cursor', 'default');
    ...
}

filter 的默认值为none( https://developer.mozilla.org/en-US/docs/Web/CSS/filter )，因此通过将其设置为此您应该删除它正在执行的任何操作。

在下面的示例中，我将 IE10 中的文本颜色更改为红色，光标将是默认光标，在任何其他主流浏览器中，它将是白色文本和手形光标。

小提琴：http: //jsfiddle.net/KyleMuir/8mxem/5/

于 2013-11-04T19:12:12.030 回答