CSS zoom - со статической шириной границы

Question

CSS zoom - со статической шириной границы

0

Это можно сделать - crossbrowser (IE9, Mozilla, Chrome, Opera)?

На этой границе фрагмента .box влияет свойство zoom. Можно ли этого избежать?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
.box {
     zoom: 3;
     -moz-transform: scale(3);  /* FF fix */
     border: 1px dotted black;
     padding:10px;
}
</style>
</head>
<body>
    <div class="box">content</div>
</body>
</html>

enloz 08 нояб. 2013, в 15:56

Источник

0

jsfiddle.net/4q42E
enloz 08 нояб. 2013, в 14:33
0

jsfiddle.net/4q42E/2
ediblecode 08 нояб. 2013, в 14:47
0

@jumpingcode Internet Explorer не поддерживает десятичную ширину.
enloz 08 нояб. 2013, в 14:55

Показать ещё 1 комментарий

Теги:

html

css

css3

zoom

cross-browser

1 ответ

Ещё вопросы

@jumpingcode Internet Explorer не поддерживает десятичную ширину.

ediblecode · Answer 1 · 2013-11-08T12-22-00.000Z

Я не совсем уверен, что вы ожидаете отсюда. Если вы примените свойство zoom к любому элементу, то все его измерения будут преобразованы на 1/x. Вдоль вашего примера, лучший способ сделать это - разделить запланированные измерения на значение вашего увеличения. В вашем примере, если вы хотите сохранить отступы в 10px (или около того), вместо этого вы должны использовать padding:3px.

Однако, поскольку ваша проблема связана с свойством border и, в частности, установив 1px в качестве значения, вы не можете разделить это на значение zoom. Вместо этого вам придется обернуть HTML вокруг него:

<div class="border">
    <div class="box"></div>
</div>

И переместите свой стиль .box границы с .box на .border

Рабочий скрипт

Downvoter, я не могу улучшить свой ответ без объяснения причин