ширина границы изображения добавляет к размеру изображения (только в Chrome) - PullRequest
Новая
       3

ширина границы изображения добавляет к размеру изображения (только в Chrome)

0 голосов
/ 01 октября 2018

Я сделал карту, которая используется изображением, но когда я пытаюсь щелкнуть указанную область, имея границу на изображении, область перемещается по ширине границы вверх и влево.

Я подозреваю, что ширина границы добавляется к ширине и высоте изображения.Насколько я знаю, это происходит только в Chrome.Вот код: 

<html>
<head>
    <title>TEST</title>
</head>
<map name="map1">
    <area shape="rect" coords="11,33,42,68" href="https://www.google.com/">
</map>
<style>
#imgStyle{
    border:20px solid black;
    border-image: url("border.png") 60 round;
    }
</style>
<body>
    <img src="start.gif" usemap="#map1" id="imgStyle">
</body>
</html>

Можно ли как-нибудь решить эту проблему?

1 Ответ

0 голосов
/ 01 октября 2018

используйте box-sizing свойство для включения размера границы в общий размер элемента :: 

    #imgStyle{
    border:20px solid black;
    border-image: url("border.png") 60 round;
    box-sizing:border-box;
    }
<img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png" id="imgStyle" style="width:200px;"
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...