CSS文本溢出错误？在谷歌浏览器中答案

【问题标题】：CSS text overflow bug? in Google ChromeCSS文本溢出错误？在谷歌浏览器中
【发布时间】：2015-10-16 00:33:40
【问题描述】：

我正在使用 PHP、MySQL、CSS、HTML 和一些脚本语言从头开始创建我的第一个站点。这是一个约会网站。对不起我的英语不好，但这不是我的母语。我找到了解决我遇到的所有其他问题/问题的方法。但当我开始测试跨浏览器兼容性时，Chrome 中出现了一个奇怪的错误。网站在这里http://www.writech.net.ee/testsite

该网站的想法是，每个想要与某人约会的人都可以用他/她的联系数据和描述填写表格并提交。每个广告都显示为浮动 div。这些 div 向左浮动。 div 的高度是固定的，所以如果有人写了更长的描述并且它不适合 div，则会出现滚动条。应该包含描述文本的 div 用 1px 红色边框勾勒出来。
广告 div 在 IE9 和 Firefox 11 中是可以的，但在 Chrome 中，文本太多的 div 不适合 div，应该应用“溢出：自动”来显示垂直滚动条，由于某种原因，与其他 div 相比，它呈现到升高的位置。起初我认为问题与出现滚动条有关，尝试“溢出：隐藏” - 溢出：隐藏隐藏过多的文本，但与其他 div 相比，div 仍然显得升高。所以问题与 div 包含多少文本有关。
由于我之前没有跨浏览器适配的经验，我不知道该去哪里看，该做什么。有人对尝试哪些 CSS hack 有想法吗？

【问题讨论】：

开始的东西： 1.检查页面的验证，有一些验证错误（大部分重复：validator.w3.org/…）其中大部分涉及＆i url，
以结尾，没有结尾（/ 部分），多次使用的 id（改用 class）。尝试修复这些问题，看看是否有帮助。

标签： css google-chrome overflow

【解决方案1】：

不得不说我觉得发生这种情况有点奇怪，但如果你将.boxes 的vertical-align 属性设置为top，它会起作用：.box {vertical-align: top}。

【讨论】：

非常感谢！它就像一个魅力。不知道为什么我一开始没有尝试这个，但是这么简单的解决方案。 :)

【解决方案2】：

我以前也遇到过类似的问题，float:left 解决了这个问题。您可以使用相同的解决方案，但您必须更改包含框的 div 的居中方式。我设法让它在 Macbook 上的 Chrome 中看起来正确（当然，你可以将样式移动到你的 CSS 文件）：

<div style="margin-left: auto; margin-right: auto; width: 1080px;">
  <div class="box" display="float:left">
    ...
  </div>
  <div class="box" display="float:left">
    ...
  </div>
  ...
</div>

【讨论】：

【解决方案3】：

您可以尝试在 .box 类上应用块显示（它是 inline-block atm），并在其上抛出一个 float:left 。（第 324 行）

【讨论】：

试过这个。这个故障现在消失了，但 div 之前水平居中于页面，现在它们都向左对齐。
使用下面发布的方法（而不是我的方法）.. 它为您省去了修复浮动问题的一些麻烦。