Question

我想显示基于浏览器的链接。例如：如果浏览器是chrome，我只想显示类名为“ .for-chrome”的链接，而隐藏其他链接。

我尝试使用CSS，但是它适用于chrome，但是在Firefox中，它隐藏了两个链接。这是小提琴链接https://jsfiddle.net/a7fxqmcw/

  @-moz-document url-prefix() {
    .for-chrome {
      display: none !important;
    }
  }

  @media screen and (-webkit-min-device-pixel-ratio:0) {
    .for-firefox {
      display: none !important;
    }
  }

<p class="click-btn for-chrome"><a href="#for-chrome">For Chrome</a></p>
<p class="click-btn for-firefox"><a href="#for-firefox">For firefox</a></p>

有人可以帮我找到替代方法吗

Answer 1

为什么不使用以下媒体查询：

.for-firefox {
  display: none !important;
}

@-moz-document url-prefix() {
    .for-chrome {
        display: none !important;
    }
    .for-firefox {
        display: inline !important;
    }
}

但是请注意，此解决方案仅考虑（firefox，而不是firefox）浏览器状态，而不考虑其他浏览器。

Answer 2

function myFunction() {
  if ((navigator.userAgent.indexOf("Opera") || navigator.userAgent.indexOf('OPR')) != -1) {
    // Is Opera
    let brow = document.querySelector('.show-opera')
    brow.classList.add('show')
  } else if (navigator.userAgent.indexOf("Chrome") != -1) {
    // Is Chrome
    let brow = document.querySelector('.show-chrome')
    brow.classList.add("show")
  } else if (navigator.userAgent.indexOf("Safari") != -1) {
    // Is Safari
    let brow = document.querySelector('.show-safari')
    brow.classList.add('show')
  } else if (navigator.userAgent.indexOf("Firefox") != -1) {
    // Is Firefox
    let brow = document.querySelector('.show-firefox')
    brow.classList.add('show')
  } else if ((navigator.userAgent.indexOf("MSIE") != -1) || (!!document.documentMode == true)) //IF IE > 10
  {
    // Is IE
    let brow = document.querySelector('.show-ie')
    brow.classList.add('show')
  } else {
    // Not detected, may show all links
    document.querySelector('.hide-all').classList.add('show')
  }
}
myFunction()

.hide-all {
  display: none;
}

.show {
  display: block
}

<p class="click-btn hide-all show-chrome"><a href="#for-chrome">For Chrome</a></p>
<p class="click-btn hide-all show-firefox"><a href="#for-firefox">For firefox</a></p>
<p class="click-btn hide-all show-safari"><a href="#for-safari">For Safari</a></p>
<p class="click-btn hide-all show-opera"><a href="#for-opera">For Opera</a></p>

<p class="click-btn hide-all show-ie"><a href="#for-ie">For IE</a></p>

想要仅使用CSS的浏览器特定链接

2 个答案: