0

Webページに、サムネイルのリストとその上にリンクボックスがあります。はリンクタグでラップされており、クリック可能です。ただし、背景がわずかに透明な上部のリンクボックスでは、クリックできるのはテキストのみであり、ボックス全体ではありません。

これは、サムネイルとリンクボックスの1つのセットのHTMLコードです。

<article class="recent-post-item">
    <h2>
        <a  href="link/to/somewhere" title="Permanent link to Something">Something</a>
    </h2>
    <a href="link/to/somewhere" title="Something" class="thumb">
        <img src="someimage.png" alt="Something" width="248" height="125" />
    </a>
</article>

そしてこれは対応するスタイルシートです：

#column-2 .recent-post-item {
    height: 127px;
    width: 250px;
    position: relative;
    border: none;
}
#column-2 .thumb {
    margin: 0;
    position: absolute;
    top: 0px;
    left: 0px;
}
#column-2 h2 {
    font-size: 22px;
    background-color:rgba(255,255,255,0.6);
    padding: 5px 4px;
    margin: 0;
    position: absolute;
    z-index: 1;
    bottom: 1px;
    left: 1px;
    right: 1px;
}

そしてここに問題を示す作業サイトがあります：http：//fuckthepony.dk/wordpress/（私が話しているサムネイルは真ん中の列のものです）

何人かの人々は彼らが問題を経験しないと私に言いました。LinuxでOpera、Chrome、Firefoxの両方をテストしましたが、これらすべてのブラウザで問題が解決していません。

4

3 に答える 3

2

これは、a要素がインライン要素であるため、使用可能なすべての親の幅を使用するわけではないためです。このルールをcssに追加できます。 

#column-2 h2 a {
    display: block;
}
于 2012-05-24T15:25:08.993 に答える
2

上記のコメントに同意しますが、透明なブロック全体をクリック可能にするには、h2のパディングを削除し、代わりにタグにパディングを追加する必要があります。

#column-2 h2 {
    padding: 0;
}

#column-2 h2 a {
    display: block;
    padding: 5px 4px;
}
于 2012-05-24T15:38:24.033 に答える
1

これは、要素にデフォルトでdisplay：blockがないためです。

この小さな行を追加するだけです：

#column-2 h2 a { display:block; }
于 2012-05-24T15:25:02.330 に答える