gpt4 book ai didi

html - CSS 缩放 - 静态边框宽度

转载 作者:行者123 更新时间:2023-11-28 12:01:21 25 4
gpt4 key购买 nike

可以做到吗 - 跨浏览器(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>

最佳答案

我不太确定您在这里期望什么。如果您将 zoom 属性应用于任何元素,那么它的所有测量值都将按 1/x 进行转换。除了您的示例,最好的方法是将预期的测量值除以缩放值。在您的示例中,如果您想将填充保持在 10px(或附近),您可以使用 padding:3px

但是,因为您的问题与 border 属性有关,具体而言,将 1px 设置为值,您不能将其除以 zoom 值。相反,您将不得不围绕它包装 HTML:

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

并将您的边框样式从 .box 移动到 .border

Working Fiddle

关于html - CSS 缩放 - 静态边框宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19861498/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com