html - Firefox15.0.1 中的设计不兼容问题

Question

http://www.atticuspetdesign.com

这个网站在 google chorme 中看起来不错，但是在 pet Industry 浮动到下一行之后，任何人都可以帮我解决这个问题，我从过去 1 周开始就被困在这件事上。:(

它看起来像

但它看起来像

Answer 1

我还可以在 15 英寸 MacBook Pro 上的 Firefox 15.0.1 中看到该问题。

您似乎没有设置重置字体大小（例如 14 像素）。在正文上设置默认字体大小，然后使用 em 可能有助于缓解问题。

Answer 2

检查您是否意外放大了页面。这可能是导致它看起来很奇怪的原因。

如果您使用的是 Mac，请点击 CMD + 0，这应该会让您处于无缩放状态。Windows 可能是 CTRL + 0，但我不确定。

我在 Firebug 中查看了您的代码。你在哪里：

.cation-outer {
    margin: 0 0 60px 35px;
}

将其更改为：

.cation-outer {
    margin: 0 0 60px 0;
}

这使它看起来像您在 Firefox 中要求的那样。仔细检查它在其他浏览器中的外观是否仍然符合您的要求。

Answer 3

我已经检查了您在 Fireforx 15.0.1 上的页面并得到了同样的错误。我认为这是因为字体大小，您可以更改容器的宽度并解决问题，但这只是浏览器特定的解决方案，该解决方案将设计混搭到 chrome 中。所以，我认为最好的解决方案是更改字体大小。

进入你的coption-align 班级，申请font-size: 81px;看起来页面在 chrome 和 Firefox 中都可以。

希望这可以解决您的问题。