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 回答