有没有办法将CSS属性纯粹设置为其他浏览器不兼容的后备？-解网

问：

我的网站在所有浏览器中都呈现良好，直到我在 Internet Explorer 中对其进行测试。我的菜单栏完全向左移动，覆盖了我的徽标，所有使用 Grid 的部分都不再显示。

我弄清楚了我必须进行的确切替换才能与IE浏览器兼容。但是，只是将它们放在我原始的 nav 和 grid 属性之后的 CSS 中，通常会在我的网站上覆盖它们，这是我不希望的，因为我仍然希望我在其他浏览器上最初编码的网站保持不变。

有没有另一种方法可以只为 IE 浏览器创建回退或如何解决这些问题？

例如，我的网格附加 - 我的标题代码很长，因为它还包括一个响应式切换菜单 - 以及两者的媒体查询！

总而言之 - 我希望浏览器忽略我之前设置的 CSS 属性并粘贴新的属性 - 以防浏览器失败。

.grid {
  display: grid;
  grid-template-columns: 500px 500px;
  grid-gap: 10px;
  grid-column-gap: 100px;
}

.grid__item {
  background-color: var(--violet-lighter);
}

/*start internet explorer grid fallback*/
.grid {
  display: inline-block;
}

.grid_item {
  width: 50%;
}


/*end internet explorer grid fallback*/

我也尝试了以下方法，但没有成功 - 在这种情况下，IE会忽略所有更改：

.grid {
  display: inline-block; /*IE fallback*/
  display: grid;
  grid-template-columns: 500px 500px;
  grid-gap: 10px;
  grid-column-gap: 100px;
}

.grid__item {
  background-color: var(--violet-lighter);
}

HTML CSS 互联网浏览器

// Detect which browser is being used:

jQuery( document ).ready(function() 
{

    // Where the class will be set, in this case to the body:
    var body = $('body');

    // Opera
    var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    if(isOpera){
        body.addClass('is-opera');
    }

    // Firefox
    var isFirefox = typeof InstallTrigger !== 'undefined';
    if(isFirefox){
        body.addClass('is-firefox');
    }

    // Safari
    var isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification));
    if(isSafari){
        body.addClass('is-safari');
    }

    // Internet Explorer:
    var isIE = /*@cc_on!@*/false || !!document.documentMode;
    if(isIE){
        body.addClass('is-internet-explorer');
    }

    // Microsoft edge
    var isEdge = !isIE && !!window.StyleMedia;
    if(isEdge){
        body.addClass('is-edge');
    }

    // Chrome
    var isChrome = !!window.chrome && (!!window.chrome.webstore || !!window.chrome.runtime);
    if(isChrome){
        body.addClass('is-chrome');
    }

    // Edge Chromium
    var isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1);
    if(isEdgeChromium){
        body.addClass('is-edge-chromium');
    }

});

添加 javascript 代码后，您可以使用浏览器对其进行测试，看看是否获得了一个名为 .然后对像这样的有问题的浏览器进行编辑。（我用你在这里试图改变的东西作为类的例子）body.is-xxx.is-internet-explorer

.is-internet-explorer .grid {
  display: inline-block;
}

.is-internet-explorer .grid_item {
  width: 50%;
}

有没有办法将CSS属性纯粹设置为其他浏览器不兼容的后备？

Is there any way I can set CSS properties purely as a fallback for others not being browser compatible?

评论

评论

评论