代码之家 › 专栏 › 技术社区 › Hala

有没有什么方法可以将CSS属性设置为其他不兼容浏览器的属性的备用项?

internet-explorer css html

Hala · 技术社区 · 3 年前

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

我想出了为了与IE浏览器兼容而必须进行的确切替换。然而,仅仅在我的原始导航和网格属性之后将它们放在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);
}

0 回复 | 直到 3 年前

Ere Männistö 3 年前

您可以尝试使用javascript/jquery键入浏览器管道,并给出 html 或者 body 特定浏览器的类名。在本例中,我使用了类名:

歌剧院= .is-opera
火狐= .is-firefox
狩猎= .is-safari
IE= .is-internet-explorer
边缘= .is-edge
铬= .is-chrome
电子铬= is-edge-chromium

需要注意的是,依赖管道类型不是这是一个好主意,如果你的网站需要被所有浏览器访问,那么你的原始代码应该以支持传统浏览器的方式编写。

要了解您可以使用什么和不可以使用什么,请访问: Can I use - Check CSS browser support

// 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代码后,您可以使用浏览器对其进行测试,看看 身体 获取一个名为 .is-xxx .然后对有问题的浏览器进行编辑,就像这样。(我用你在这里试图改变的东西作为例子 .是internet explorer吗 (班级)

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

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

-1

meerhamzadev 3 年前

我不知道回退,但你可以在一个单独的文件中编写特定于IE的CSS,然后以这种方式使用条件注释:

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

为了更好地理解,您可以参考本文。 https://www.browserstack.com/guide/create-browser-specific-css