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％以外的缩放级别呈现的所有内容完全是每个浏览器内部选择估算和渲染的方式，您：

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

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

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

Answer 2

我遇到了类似的问题，边界消失了。 This answer对我非常有帮助。通过伪元素绘制边框。您的案例的解决方案可能是：

UnicodeDecodeError

.mEditor {
  display: flex;
  /*border-bottom: 1px solid #d7d7d7;           <- REMOVE  */ 
  
  position: relative;       /*   <- ADD   */
}

.mEditor::after{       /*   <- ADD   */
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  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;           <- REMOVE  */   
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  
  position: relative;       /*   <- ADD   */
}
.m-editor-noc::after{       /*   <- ADD   */
  content: "";
  position: absolute;
  top:0;
  bottom:0;
  right:0;
  left:0;
  border-left: 1px solid #d7d7d7;
}

.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;
}

在所有浏览器中缩小/缩小边框消失

2 个答案: