缩放页面时如何保持页面正文中 div 标签的大小不受影响？答案

【问题标题】：How to keep the size of the div tags in the body of a page unaffected while zooming the page?缩放页面时如何保持页面正文中 div 标签的大小不受影响？
【发布时间】：2012-10-26 05:16:34
【问题描述】：

我有一个 HTML 页面，其中正文包含一个 div 标签。在 div 标签中，我有一个包含其他 div 标签的表格。当我缩放正文时，下拉 div 标签应该被限制缩放（或者即使它被缩放，我也想将它恢复到原始大小）。正文的 CSS 是：

body {
    width:1000px;
    padding-top:100px;
    zoom: 1.165; -moz-transform: scale(1.165);
}

代码如下所示。

<body>
<!--end of button effect-->
<div class="type-road-form">
<h1></h1>
<hr>
<table>
<tr id="rd-type">
    <td height="70">
        <div class="drop-down">
          <select name="select-rd-type" id="select-rd-type">
<option>Select Road Type</option>
            <option>urban</option>
        </div>
    </td>
</tr>
<tr id="sped-limit">
    <td height="70">
        <label>Speed Limit (mph)</label>
        <br>
        <div class="drop-down">
        <select id="Drop-Down-Speed" name="Speed Limit Selection">
        <option >Select Speed</option>
        <option>25</option>
        <option>30</option>
</div>
</body>

【问题讨论】：

标签： html css

【解决方案1】：

你需要给你的 div 添加宽度，在样式表中加入以下内容

div.type-road-form { width: 1000px; }

顺便说一句，在<body> 之后你有一个额外的</table>，你需要删除它。

【讨论】：

我仍然面临同样的问题，即缩放正文时 div 标签正在重新调整大小
那么它解决了你的问题吗？我看了其他答案，好像我误解了你的问题。

【解决方案2】：

不，没有好的方法可以做到这一点。您可以在此处获得更多参考：

How to keep a <div> constant in size as the user zooms in and out on the page?

【讨论】：

【解决方案3】：

我认为你可以尝试设置你最父 div 与

style="position:relative"

这对我有用，我认为这将是一个适当的解决方案，现在所有子 div 都将相应定位并且不会移动。

【讨论】：