Question

我正在尝试将div转换为链接。下面的代码在firefox中工作正常但在IE中鼠标指针不响应链接。有没有解决的办法？感谢。

<html>
<head>
<style type="text/css">
.test{
    width:100%;
    height:100px;
    background:#666666;
}
</style>
</head>

<body>
<a href="http://www.google.com">
    <div class="test">
        kjlkjlkjkljl
    </div>
</a>

</body>
</html>

Answer 1

为什么要使用div作为链接？

您不能只将链接显示为阻止吗？

a{
  display:block;
}

或使用span代替div。

Answer 2

正如Welbog所说，<a>和<div>元素应该颠倒过来：

<div class="test">
    <a href="http://www.google.com">
        Lorem ipsum
    </a>
</div>

然后在您的风格中，您可以展开<a>代码以填充整个div：

.test a {
    display: block;
    width: 100%;
    height: 100%;
}

Answer 3

我认为IE在这种情况下实际上是正确的。

div是块级元素;所以它不应该包含在内联元素中，例如a。如果您使用span（代替div）可以在IE和Firefox中使用吗？

如果你想让看起来像链接一样（就光标而言），那么你可能想要使用：

a > div, /* please change your mark-up to the following */
a > span {cursor: hand; /* for earlier versions of IE */
          cursor: pointer; /* for, I think, IE 7+ and FF etc. */
}

Answer 4

您可以使用Cursor CSS属性。 http://www.w3schools.com/CSS/pr_class_cursor.asp

但是，你的HTML不正确。您不能将<div>放在<a>标记内。

Answer 5

尝试：

.test{
    width:100%;
    height:100px;
    background:#666666;
    cursor: pointer;
}

Answer 6

这是在BBC网站和卫报上使用的最佳方式：

http://codepen.io/IschaGast/pen/Qjxpxo

继承人html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

继承人CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}


.highlight {
  background-color: #ddd;
}

将Div变为Link

6 个答案: