Question

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

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

Answer 1

不得不说，我认为发生这种情况有点奇怪，但是如果您将vertical-align es的.box属性设置为top则可以：.box {vertical-align: top}。

Answer 2

之前我遇到过类似的问题，并且浮动：左边工作了。您可以使用相同的解决方案，但您必须更改包含框的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>

Answer 3

您可以尝试在.box类上应用块显示（它是内联块atm），并在其上抛出一个浮点数：左侧。（第324行）

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

3 个答案: