Изображение блока ссылок занимает всю ширину страницы

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

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; 
} 

Answer 2

Попробуйте давая ссылку эти стили

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