时间戳

首页 > 解决方案 > 只需要使用 css 的浏览器特定链接

html - 只需要使用 css 的浏览器特定链接

问题描述

我想显示基于浏览器的链接。例如：如果浏览器是 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>

有人可以帮我找到替代解决方案吗

标签： htmlcss

解决方案

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

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

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

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

推荐阅读