Question

我有一个主div作为容器，宽度为90％。在顶部，我有height: 5em，display: block和margin: auto的标题（图片）。

我的HTML代码设置如下：<a href=""><img scr=""></a>。

当我点击图片左侧的方式时，我仍然可以点击链接。 我正在使用Chrome 。我在 Safari 和 Firefox 中进行了测试同样的结果。当我的鼠标直接在图片上时， IE 和 Opera 仅注册了链接（这就是我想要的）。我希望我能在所有浏览器中得到我想要的东西。感谢。

修改：以下是一个示例：http://jsfiddle.net/Bionicrm/dXaAF/。

Answer 1

尝试给这些样式链接

display:block;
width:100px; //or whatever you want
height:5em;
position:relative;
margin:auto;

Answer 2

http://jsfiddle.net/derekstory/K7Vwd/

您可以在整个事物周围放置一个包装器，指定您想要显示的大小：

示例：

HTML

<div id="wrap"> <a id="test" href="test.com">
        <div id="image">

        </div>
    </a>
</div>

CSS

body, html {
    height: 100%;
}
#test {
    height: 200px;
    width: 200px;
}
#image {
    background: #000 url("http://www.veterinarian.com/uploads/cms/20100622/4c212d6c1ca11.jpg");
    height: 100%;
    width: 100%;
    background-size: 100%;
}
#wrap {
    width: 200px;
    height: 150px;
}

图像链接块占据页面的整个宽度

2 个答案: