css - 整个 div 是 div 内的链接 - 可点击 - 包括小提琴答案

【问题标题】：css - entire div is link inside the div - clickable - fiddle includedcss - 整个 div 是 div 内的链接 - 可点击 - 包括小提琴
【发布时间】：2012-11-28 10:09:19
【问题描述】：

带有标题和文本的 Div。当 div 悬停时，背景会发生变化，并且会从 div 的底部升起一个“toast”。整个 div 可根据标题链接点击，并在 css 中完成。

问题：在所有版本的 IE 中，只有当光标不在 div 内的文本上时，链接才可点击（小提琴示例中的问题相同）。它可以在 FF、Opera 和 Safari 中正常运行。

JSFiddle - the example

<div class="one-third">
    <div class="inside">
        <h3><a href="/#">Testing</a></h3>
        <p>This some text inside the testing blox blah blah blah blah blah.</p>
        <p>and some more and some more.and some more and some morep>and some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some moreand some more and some more.</p>
        <span class="toast">View more stuff</span>
    </div>
</div>

css:

.one-third{
    border:1px solid #d8d8d8;
    margin:35px 9px 0;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 6px;
    background:#ffffff;
    text-align:center;
    position:relative;
    overflow:hidden;
    cursor: pointer;
    padding:25px 0 0 0;
}

.one-third:hover{ 
    background: #eeeeee;
}

.inside{
    height:185px;
}

.inside h3 a, .inside h3 a:hover{ /*entire div is link*/
    font-size: 20px;
    color:#30629a;
    text-decoration:none;
    position:absolute; 
    width:100%;
    height:100%;
    top:13px;
    left: 0;
    z-index: 1;
}

.inside p{
    padding:15px 15px 0 15px;
}


.toast{
    background: rgb(71, 71, 71); /* Fall-back for browsers that don't support rgba */
    background: rgba(0, 0, 0, .7);
    display: block;
    position: absolute;
    left: 0;
    width: 100%;
    bottom: -30px;
    line-height:30px;
    color: #fff;
    text-shadow:0 1px 1px #111111;
    font-size:14px;
    text-align: center;
    transition: all 0.1s linear 0s; /*no moz, webkit, or o because radius is needed and won't scroll right*/    
    -moz-border-radius: 0 0 6px 6px;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
}

.one-third:hover .toast {
    bottom: 0;
}

【问题讨论】：

标签： css html z-index

【解决方案1】：

另一种解决方案是添加

background:url("datdata:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");

到.inside h3 a，.inside h3 a：悬停。解决IE问题的base64透明gif。

如果在这里找到：http://css-tricks.com/snippets/html/base64-encode-of-1x1px-transparent-gif/

【讨论】：

你能再解释一下吗？指向 gif 的链接最终导致 IE 崩溃……我有一个自己的透明 gif，并将其添加为 h3 a 和 h3 a:hover 的重复背景：hover 什么都不做 - 结果相同。
该链接似乎使 IE 崩溃，这有效吗？ jsfiddle.net/Zp2Rp/27 基本上，base64 编码的图像允许您在 CSS 中包含图像，而无需单独的图像文件或 http 请求来获取它
刚刚试了一下，它工作得很好......不知道为什么它现在会这样做，哈哈，但会进一步研究以找出答案。谢谢！

【解决方案2】：

一种解决方案是将“a”移到 h3 之外。 IE 在“p”标签后面的那个元素有问题。

<a href="/#"><h3>Testing</h3>
<p>...</p></a>

http://jsfiddle.net/Zp2Rp/14/

【讨论】：

是的，我真的不希望 div 的全部内容（文本）成为锚文本，但目前这也是我为 IE 想出的唯一解决方案。
另外，从技术上讲，您不应该将块元素放在内联元素中...... h1 是块，而 a 是内联的。