html - 在所有浏览器中缩小/放大时边框消失

Question

我正在使用不同的浏览器开发一个元素。

我有一个带边框的表格，当我缩小时，我的页面边框消失了。

这在所有浏览器中都会发生，例如 IE、EDGE 和 Chrome 浏览器。

是不是DOM结构问题？

它需要支持 75% 到 125% 的缩放级别。具体来说，在 Chrome 中将缩放设置为 67% 并查看变化

请提供此问题的可能解决方案。

.mEditor {
  display: flex;
  border-bottom: 1px solid #d7d7d7;
}

.m-label {
  width: 30%;
  display: flex;
  background-color: #f2f2f2;
}

.m-editor-noc {
  flex: 1;
  display: flex;
  background-color: #FFFFFF;
  border-left: 1px solid #d7d7d7;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mfEditor {
  display: flex;
  flex: 1 0 auto;
}

.mEditor-li {
  vertical-align: middle;
  border-left: 1px solid #d7d7d7;
  height: 18px;
  display: inline-block;
  margin-top: 3px;
}

.mEditor .tEditor {
  border: none;
  flex: 1;
  padding-right: 6px;
}

<div class="m-group">


  <div id="id251" class="mEditor">

    <div class="m-label">
      <label for="id223" title="Address">Address</label>
    </div>
    <div class="m-editor-noc">
      <div id="id252" class="mfEditor">


        <input type="text" class="tEditor" value="Address" name="" id="id223" maxlength="255" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id254" class="mEditor">

    <div class="m-label">
      <label for="id224" title="Address 2">Address 2</label>
    </div>
    <div class="m-editor-noc">
      <div id="id255" class="mfEditor">


        <input type="text" class="tEditor" value="16" name="" id="id224" maxlength="30" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id257" class="mEditor">

    <div class="m-label">
      <label for="id225" title="Postcode">Postcode</label>
    </div>
    <div class="m-editor-noc">
      <div id="id258" class="mfEditor">


        <input type="text" class="tEditor" value="Post Code" name="" id="id225" maxlength="10" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id25a" class="mEditor ">

    <div class="m-label">
      <label for="id20f" title="City">City</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25b" class="mfEditor">


        <input type="text" class="tEditor" value="City" name="" id="id20f" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

      </div>

    </div>
  </div>



  <div id="id25d" class="mEditor">

    <div class="m-label">
      <label for="id228" title="District">District</label>
    </div>
    <div class="m-editor-noc">
      <div id="id25e" class="mfEditor">


        <input type="text" class="tEditor" value="" name="" id="id228" maxlength="100" tabindex="0">


      </div>
      <div class="editor-links"></div>
    </div>
  </div>



  <div id="id260" class="mEditor ">

    <div class="m-label">
      <label for="id210" title="Country">Country</label>
    </div>
    <div class="m-editor-noc">
      <div id="id261" class="mfEditor">


        <input type="text" class="tEditor" value="Country" name="" id="id210" autocomplete="off" maxlength="50" tabindex="0">


      </div>
      <div class="editor-links">

      </div>
    </div>
  </div>


</div>

Answer 1

如果 “我们支持所有浏览器和缩放级别 75% - 125%” 你的意思是无论缩放级别如何，你都希望边框在实际像素中具有相同的大小，你就出局了运气。这在技术上是不可能的。

您应该只针对 100% 的缩放级别进行开发。没有可靠的跨浏览器方法来了解缩放级别，这意味着此信息在您的 Window 对象中不可用，因此您不能使用它来调整元素的属性值。

作为后备方案，您可以将边框加粗，这样即使在缩放时也能看到。现在它没有显示，因为它可能获得亚像素大小并且被浏览器估计为不可渲染。
请注意您在 100% 以外的缩放级别呈现的所有内容完全取决于每个浏览器内部选择估计和呈现方式的心血来潮，您:

• 无法控制
• 如有更改，恕不另行通知。

换句话说，您的初始陈述应该有一个小脚注:

* 在合理范围内。缩放时的渲染取决于浏览器。