Question

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

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

问题的详细说明：

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

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

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

因此，例如在Chrome中，该元素设置了min-height 0.0105px，该元素的实际高度足以将其他元素向右推动，即使条件不可见（这就是为什么我不能首先使用display:none因为RTL布局必须保持原状。

现在的问题是，例如Safari不允许我使用0.0105px作为min-height CSS属性的最小值。我测试了所需的最低值，并且它是Safari的所有等于或高于1px的值。所以一个解决方案就是你只需要将这个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

＆＃13;

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

＆＃13;

<div></div>Simple test.

＆＃13;

...创建一个空的跨浏览器，跨设备具有所需的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>

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

2 个答案: