Question

我有一个表，其单元格包含具有不同内容的div元素，因此它们具有不同的高度。以这个小提琴为例：

如您所见，代码非常简单：

HTML

<table>
  <tr>
    <td>
      <div style="background-color: orange">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: aqua">
        Line 1<br>
        Line 2
      </div>
    </td>
    <td>
      <div style="background-color: #fac">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
   <tr>
    <td>
      <div style="background-color: #8f5">
        DIV
      </div>
    </td>
    <td>
      <div style="background-color: #cb1">
        Line 2.1<br>
        Line 2.2
      </div>
    </td>
    <td>
      <div style="background-color: #eda">
        10<br>
        20<br>
        30<br>
      </div>
    </td>
  </tr>
</table>

CSS

tr {
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 100%;
}

td div {
  height: 100%;
}

我希望细胞内的div占据所有空间，所以它们看起来一样。 Firefox会这样做，因此它的渲染是：

另一方面，Chrome不会观察到height : 100% df div，因此渲染为：

然后有趣的事实是，如果我没记错的话，Chrome会将其渲染为与Firefox相同的版本，直到我更新到版本63（我认为我之前有版本59）。

有什么建议吗？谢谢！

Answer 1

请更改您的此Css代码并再次检查。铬

// ** MySQL settings - You can get this info from your web host ** //
/** The name of the database for WordPress */
define('DB_NAME', 'database');

/** MySQL database username */
define('DB_USER', 'root@localhost');

/** MySQL database password */
define('DB_PASSWORD', '');

/** MySQL hostname */
define('DB_HOST', 'Mysql@127.0.0.1');

define('port', '3306');


/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');

/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

Answer 2

~~解决方案有这个CSS：~~

<!-- THIS CODE DOESN'T WORK -->
tr {
  display : flex;
  height: 100%;
}

td {
  vertical-align: top;
  min-width: 150px;
  height: 1;   
}

td div {
  height: 100%;
}

我就在我开始的地方。正如@ 3rdthemagical指出的那样，display : flex <tr>打破了布局，列没有对齐。所以，我做了另一个测试，这些是结果：

在CHROME中工作CSS：

tr {
  height: 100%;
}

td {
  height: 1px;
}

div {
  height: 100%;
  background-color: aqua;
}

示例输出：

以上代码在Firefox中如下所示：

FIREFOX中的工作CSS：

tr {
  height: 100%;
}

td {
  height: 100%;   /* <---------------- */
}

div {
  height: 100%;
  background-color: aqua;
}

但是，在Chrome中，我遇到了问题，因为我看起来像这样：

谁是对的？ Chrome或Firefox？是不是有针对此的跨浏览器解决方案？

我会继续调查......

Answer 3

HTML更改如下

<table>
          <tr>
            <td>
              <div style="background-color: orange">
                DIV
               <br>
               <br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: aqua">
                Line 1<br>
                Line 2<br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #fac">
                10<br>
                20<br>
                30<br>
              </div>
            </td>
          </tr>
           <tr>
            <td>
              <div style="background-color: #8f5">
                DIV
               <br>
               <br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #cb1">
                Line 2.1<br>
                Line 2.2<br>
               <br>
              </div>
            </td>
            <td>
              <div style="background-color: #eda">
                10<br>
                20<br>
                30<br>
              </div>
            </td>
          </tr>
        </table>

Answer 4

您可以使用display flex

jsfiddle

<强> CSS

tr {
  height: 100%;
  display: flex;
}

td {
  vertical-align: top;
  min-width: 150px;
}

td div {
  height: 100%;
}

使用flex，你可以将元素居中，垂直对齐，重新排序，你可以做很多事情。

我已经在mozilla中测试过，您可以使用前缀来获得更多兼容性：

  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;

Answer 5

最后，对我有用的解决方案是使用CSS条件并根据浏览器加载不同的样式。我在这个问题中解释过：

Load different CSS rule depending on the browser in an Angular 4 component

干杯，

Chrome和Firefox中的“div”高度不同

5 个答案: