0

假设我将应用以下 css：

h2:nth-child(3){
     /*some styles*/
 }

这在 IE 中不起作用。所以我只需要使用 IE 的样式为 IE 重新设置样式，但是如果应用了太多样式，那么对于 IE，我必须为 IE 重新设置样式，并且可能比以前的作品更多。那么有什么技术可以让我可以为除 IE 之外的所有浏览器应用 css 吗？

4

4 回答 4

3

您可以考虑使用conditional comments来隔离 IE only 样式

因此，像现在一样为元素设置样式，然后重新设置 IE 所需的样式。

例子：

<!--[if IE]>
  //styles here
<![endif]-->

如果你想以 IE 8 为目标，你可以这样做

<!--[if IE 8]>

阅读更多： http: //msdn.microsoft.com/en-us/library/ms537512 (v=vs.85).aspx

于 2013-10-31T12:21:58.850 回答
2

您可以使用类似于initializr的方式为旧 Internet Explorer 添加类

<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->

在您的 css 中，您现在可以为旧的 Internet Explorer 编写代码，如下所示：

.oldie h2 {
  /* custom h2 styling just for old Internet Explorers*/
}
于 2013-10-31T12:26:16.280 回答
0

正如其他建议的那样，您可以在 HTML 中使用条件注释为 IE 制作特定的 CSS，例如：

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

而if IE 8仅针对 IE 8。if IE针对所有这些。if lte IE 8目标 IE 8 及更低版本（lte = 低于或等于）。

如果您的项目有 jQuery，那么您可以使用jQuery 的选择器在旧浏览器上应用更新的选择器，而不是做更多的工作来创建其他 CSS。为此，您可以：

h2:nth-child(3), h2.nth-child-3 { /*note the class I added */
     /*some styles*/
}

测试选择器兼容性的功能：

function selectorSupported(selector) {
    var support, link, sheet, doc = document,
        root = doc.documentElement,
        head = root.getElementsByTagName('head')[0],

        impl = doc.implementation || {
            hasFeature: function() {
                return false;
            }
        },

        link = doc.createElement("style");
    link.type = 'text/css';

    (head || root).insertBefore(link, (head || root).firstChild);

    sheet = link.sheet || link.styleSheet;

    if (!(sheet && selector)) return false;

    support = impl.hasFeature('CSS2', '') ?

    function(selector) {
        try {
            sheet.insertRule(selector + '{ }', 0);
            sheet.deleteRule(sheet.cssRules.length - 1);
        } catch (e) {
            return false;
        }
        return true;

    } : function(selector) {

        sheet.cssText = selector + ' { }';
        return sheet.cssText.length !== 0 && !(/unknown/i).test(sheet.cssText) && sheet.cssText.indexOf(selector) === 0;
    };

    return support(selector);

};

使用此功能，您现在可以测试选择器并执行相应操作：

//For browsers without :NTH-CHILD(N) - aka IE7/8
if (!selectorSupported(':nth-child(n)')) {
    $('h2:nth-child(3)').addClass('nth-child-3');
}

其他测试示例：

//For browsers without :LAST-CHILD - aka IE7/8 too
if (!selectorSupported(':last-child')) {
    $('p.last-child').addClass('last-child');
}

但当然，只有当你想要 javascript 方法时，才不必加倍 css。

于 2013-10-31T12:45:08.333 回答
0 
.ie h2:nth-child(3){

 }

another way

<!--[if IE]>
  //styles here
<![endif]-->
于 2013-10-31T12:24:30.290 回答