{HTML CSS } aタグ中の全体をクリックできるようにしたい

前提・実現したいこと

html
1
2<div class="document-btn">
3            <a href="#"><span id="document-btn1"></span></a>
4          </div>
5

CSS
1
2.document-btn a{
3  background-color:#eee;
4  display:block;
5  width:100%;
6  font-size:28px;
7  padding:8px 40px;
8  text-align:center;
9
10}

試したこと

block要素にして、widthを１００％にすればできると思ったんですが、できませんでした。今は文字の上しかクリックできないんですが、どうしたら背景色全体をクリックできるようにできるでしょうか

補足情報（FW/ツールのバージョンなど）

Google Chrome の　バージョン: 70.0.3538.102（Official Build）（64 ビット）です

kei344

2018/11/30 16:44

どのブラウザのどのバージョンにおいて起こるかを質問文に追記してください。

yui-chan

2018/11/30 22:58

Google Chromeのバージョン: 70.0.3538.102（Official Build）（64 ビット）らしいです

KazuhiroHatano

2018/12/01 01:16 編集

うちのChrome近いバージョンですが再現しませんね、背景色がtransparentだと反応しないので、rgba(0,0,0,0);とかにしておくというテクはありますが背景色は設定してるのでこれではなさそうですし、一応Chromeの特性としては、中身が空の要素を削除してしまうというのがありますが、文字が入るならまあ関係ないですかね

行動規範の内容に同意します

回答3件

ベストアンサー

それができんということはかなり古いIEをお使いですかね
モダンブラウザなら大体意図した通りになります

正直それができないバージョンのIEなんて切り捨てていいと思うんですが
一応回避策的なことを書いておくと

css
1
2	.document-btn a{
3		....
4		position: relative;
5		overflow: hidden;
6	}
7	.document-btn a::before{
8		content: '　';
9		font-size: 100em;
10		position: absolute;
11		top:0;bottom:0;left:0;right:0;
12		margin:auto;
13	}