href 适用于 Edge 但不适用于 Chrome

Question

href 无法在 Chrome 中使用，但可以在 Microsoft Internet Explorer 或 Edge 中使用。

看起来行 (a href="....html")Something(/a) 在 edge 或 safari 上不起作用。

类似于下拉菜单。

有很多代码。您可以在此处查看此问题：http://www.kuhnibelarusi.lv。您将看到 4 条蓝线。点击其中之一，会出现下拉菜单。

.dropdown {
  position: relative;
  border-radius: 0px;
}
.dropdown-menu {
  top: 100%;
  left: 0;
  z-index: 1000;
  float: inherit;
  padding: 5px 0;
  margin: 4px 0 0;
  font-size: 14px;
  text-align: left;
  list-style: none;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  border: 0px solid #ccc;
  border: 0px solid rgba(0, 0, 0, .15);
  border-radius: 0px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.42857143;
  color: #333;
  white-space: nowrap;
}
.dropdown-menu>li>a:hover,
.dropdown-menu>li>a:focus {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}
.caret {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 2px;
  vertical-align: middle;
  border-top: 4px dashed;
  border-top: 4px solid ;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

<li class="dropdown" style="list-style-type: none; padding: 5px; background-color: #3a4d5d; margin: 2px"><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false" aria-haspopup="true" style="color: white; padding-left: 10px">Pakalpojumi <span class="caret"></span></a>
  <ul class="dropdown-menu">
    <li><a href="/lv/services_design.html">Interjera dizains</a></li>
    <li><a href="/lv/services_kit_designing.html">Virtuves projektēšana</a></li>
  </ul>
</li>

Answer 1

您需要告诉 Chrome 和其他浏览器您想要 'a' 标签的悬停状态，使用 CSS 来做到这一点...

.dropdown-menu li a {
    color: red;
}
.dropdown-menu li a:hover {
    color: blue;
}

您还可以设置样式 :active 和 :visited 试一试 =]

Answer 2

您依赖默认的浏览器样式。正如您所注意到的，它们并不可靠。

您似乎还假设 href 包含如何设置元素样式的说明 - 这是不正确的。 href 只定义 link 的目标 url。

如果您希望它以特定方式显示（如您所说，变成蓝色），您必须使用自己的 css 规则：

a,
a:link {
    color: black;
}

a:hover {
    color: blue;
}

a:visited {
    color: red;
]

严格来说，你只需要第二部分就可以让 link 在悬停时变成蓝色，但如果你没有定义它之前的样子，你会再次在不同的浏览器中得到不同的结果.

href 适用于 Edge 但不适用于 Chrome

href works on Edge but not on Chrome

html

css

google-chrome

microsoft-edge