Question

我无法设置<a>元素的可拼接区域的高度。我已经在CSS表中写了display: block;，但它不起作用。

HTML表格：

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <link href='http://fonts.googleapis.com/css?family=Cedarville+Cursive' rel='stylesheet' type='text/css'>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="script.js"></script>
</head>

<body>
    <div id="dprenav">
        <p id="prenav">Olive</p>

        <div>
            <a id="fblogo" href="http://www.facebook.com" target="_blank"><img id="imgfblogo" src="f_logo.png"></a>
        </div>

        <div>
            <a id="right-corner" href="http://www.youtube.com" target="_blank"><img src="corner_banner.png"></a>
        </div>

        <div>
            <a href="https://twitter.com/JuliDAlessandro" id="twitter-follow-button" target="_blank" ><img src="bird_gray_48.png"></a>
        </div>
    </div>

</body>

</html>

CSS表格：

body {
background-color: olive;
}

h1 {
font-family: 'Cedarville Cursive', cursive;
font-size: 230px;
text-align: center;
padding: 0px;
}

a {
display: block;
text-align: center;
font-family: 'Cedarville Cursive', cursive;
color: white;
font-size: 100px;
padding: 0px;
text-decoration: none;
}

#prenav {
font-family: 'Cedarville Cursive', cursive !important;
font-size: 25px !important;
color: white !important;
}

#dprenav {
background-color: #97BB55;
height: 50px;
width: 3000px;
margin: -7px;
padding-left: 5px;
position: relative;
}

#right-corner {
position: fixed; 
cursor: pointer; 
top: 0px; 
right: 0px; 
z-index: 99999;
}

#twitter-follow-button {
display: block;
position: absolute;
top: -85px;
left: 80px;
display: block;
height: 0px;
width: 0px;


}

#fblogo {
position: absolute;
top: -80px;
left: 145px;
display: block;
height: 0px;
width: 0px;

}

#imgfblogo {
height: 40px;
}

<a>元素的可点亮区域的宽度是正常的，但我无法设置高度，它是大的，我可以设置它的小尺寸。

Answer 1

由于您要在锚点height: 0px; width: 0px;内设置图像，因此锚点需要定义测量值以补偿提供测量值的儿童的缺乏。

Answer 2

这样的事情应该有效：

#dprenav a {
    height: 50px;
}

无法定义<a> clickeable area height</a>

2 个答案: