当高度为0px时，有没有办法保持元素宽度？

Question

我会尽力在下面详细解释我的问题，但问的问题保持不变。简而言之，我的问题是：

有没有办法让隐藏/隐藏的元素高度为0px，或者至少比1px的高度少得多，但仍保持元素的宽度，以便它也可以在Safari中运行？

问题的详细说明：

我在Safari中的CSS min-height属性有问题。例如，在Chrome，Firefox和其他浏览器中，您可以使用1px以下的值作为min-height属性。虽然Safari不允许您设置低于1px的值。

例如，我正在处理仅在Safari中发生的RTL问题。它与某些项目根据用户在表单中选择的特定值有条件地隐藏的事实有关。至关重要的是，可见元素左侧的项目至少有一些高度（但仍然不可见），否则右侧元素（具有float:left属性）将放置在左侧，直到所有元素都在左边有条件可见。

现在你可以说只使用float:right这些元素，但在这种情况下这不是解决方案因为RTL设置在系统中必须是可选的并且是用户首选项，并且我们不控制元素的顺序（因为表单在原来没有RTL状态下保存，彼此相邻排列。

所以例如在Chrome中元素设置了一个min-height的0.0105px工作，并且元素实际上有一个高度足以主动推动其他元素向右，即使有条件地不可见（这就是为什么我不能在第一个使用display:none由于RTL布局必须保持原状。）

现在的问题是，例如Safari不允许我使用0.0105px作为min-height CSS属性的最小值。我测试了最低要求值是什么，并且它是所有等于或高于1px的Safari。所以一个解决方案就是你只将这个1px应用于safari浏览器，但在这种情况下这不是一个理想的解决方案，我将解释原因。

系统允许用户创建表单，并且可能是用户在表单中间具有50个甚至更多列元素，这些列元素可能是有条件隐藏的。在这种情况下，这意味着当它们全部有条件地隐藏时，它们的总高度（当所有列的宽度为1/1时）将为50px。在最终用户构建表单时，这是不希望的并且不是预期的。

在Chrome示例中，50px将改为0.5px，这对我来说是可以接受的。

对此或想法的任何想法将不胜感激。也许这是我的条件隐藏/显示系统中的一个设计问题，也许我应该采取一种完全不同的方法来使这项工作很好？欢迎任何想法。

我在Safari中工作的例子，但是我想保持左边2列的高度0px：

.column-wrapper {
  background-color:red;
  float:left;
  width:30%;
}
.column-content {
  background-color:grey;
}
.conditionally-hidden {
  visibility:hidden;
  height:0.1px;
}

<div class="column-wrapper"> <!-- column must keep it's original width, but must be 0px in height when inner content is conditionally hidden -->
  <div class="column-content conditionally-hidden">
    This content is conditionally hidden
  </div>
</div>

<div class="column-wrapper"> <!-- column must keep it's original width, but must be 0px in height when inner content is conditionally hidden -->
  <div class="column-content conditionally-hidden">
    This content is conditionally hidden
  </div>
</div>

<div class="column-wrapper"> <!-- column must stay on right side, because of RTL layout -->
  <div class="column-content">
    This content visible
  </div>
</div>

Answer 1

div {
  width: 50%;
  height:0;
  display: inline-block;
  overflow: hidden;
  padding: 0;
}

<div></div>Simple test.

...创建一个空的跨浏览器，跨设备具有所需的width而不显示任何内容。

如果上述情况不足以满足您的需求，那么如果您创建一个Minimal, Complete, and Verifiable example来解决您遇到的实际问题，那么您的时间和我们的时间都会更好，恕我直言。

Answer 2

好吧，在@Huangism建议看看CSS Flexbox Layout Module后，我找到了解决问题的方法。工作范例：

.row {
    background-color: red;
    display: -webkit-flex; /* Safari */
    display: flex;
    -webkit-align-items: center; /* Safari 7.0+ */
    align-items: flex-start; 
}
.row > .column {
    width: 30%;
    background-color:blue;
    color:white;
}
.row > .column.conditionally-hidden > * {
    display:none;
}

<div class="row">
  <div class="column conditionally-hidden">
      <div class="content">
          content 1
      </div>
  </div>
  <div class="column conditionally-hidden">
      <div class="content">
          content 2
      </div>
  </div> 
</div>

<div class="row">
  <div class="column conditionally-hidden">
      <div class="content">
          content 1
      </div>
  </div>
  <div class="column conditionally-hidden">
      <div class="content">
          content 2
      </div>
  </div>
  <div class="column">
      <div class="content">
          content 3
      </div>
  </div>  
</div>