2

我正在使用 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 有想法吗？

4

3 回答 3

3

不得不说我觉得发生这种情况有点奇怪，但是如果你将es的vertical-align属性设置为它就可以了：..boxtop.box {vertical-align: top}

于 2012-04-04T08:55:11.457 回答
3

我以前也遇到过类似的问题，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>
于 2012-04-04T09:24:08.343 回答
1

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

于 2012-04-04T08:52:03.430 回答