3

我正在制作我的第一个完全响应式网站，但遇到了问题。该站点似乎在 Firefox 和资源管理器中按预期工作。给我带来问题的浏览器是 chrome 和 safari。

在页面底部的生物/登陆页面（http://designerdsite.com/new/ ）上有两个部分，一个标题为“我有技能”，另一个标题为“他们爱我为他们”。当我加载页面时（无论浏览器宽度是什么大小），它都会正确加载，但是在浏览器宽度缩小然后重新打开布局重新定位之后。在“技能”部分，右侧的 div 低于左侧的 div。在“他们爱我”的场景中，文字落在图片下方。由于某种原因，容器 div 的宽度似乎没有被理解。也许它是别的东西。我真的不确定这里发生了什么，非常感谢任何人的任何建议。谢谢！！

4

5 回答 5

1

你为什么不使用twitter 引导程序，它会让你的生活变得非常轻松。

于 2013-08-31T14:34:30.510 回答
1

我在我的网站上发现了一个类似的问题。据我所知，Chrome/Webkit 似乎在浮动元素的正确（重新）定位方面存在问题。

因此有 2 个（可能更多）选项：
1. 您可以使用 Javascript 强制浏览器重新渲染（而不是重新加载！！！）这些元素（例如，通过将 display 属性更改为 none 并返回到 block）
2. 使用另一个定位变量，如“inline-block”或“table-cell”

于 2013-08-31T14:25:07.550 回答
0

它与浏览器如何计算百分比有关。一个快速的解决方法是max-width为左容器设置一个：

#skills-left {
  float: right;
  width: 47%;
  max-width:411px;
}
于 2013-08-31T14:50:38.043 回答
0

Seems like an issue with all the percentage widths. I know WebKit can have issues with nested and rounded percentages etc, so when the page is resized both the widths on the images and quotes, as well as padding on the parent element are recalculated.

You'll see if you remove the padding: 0 5% on the max-width class, the problem no longer occurs.

Try wrapping the quotes in a 100% width div:

<div class="quote-wrapper" style="width: 100%;">
    <div class="reference clear-both">
        <img src="images/monica.jpg" alt="Monica" class="reference-pic">
    </div>
    <div class="quote">
        <p><em>“Paul is the most committed hard working person I've had the pleasure to supervise. If he was unfamiliar with something he did the research to inform himself and others. Paul is one of those rare breed of people who comes to a supervisor with options not just problems.”&lt;/em></p>
        <p>Monica Luchak, Former Director of Creative Services, BoardSource</p>
    </div>
</div>
于 2013-08-31T14:08:59.410 回答
0

看起来你用media-query在你的网站上是对的？？？...无论如何，所以我猜你知道原因....例如，假设您的最后一个media-query max width被定义为600px...那么它可以在 600px 及以下（不远)....当您的浏览器调整大小时，width:480px (for ex.)您的设计（如字体大小、填充等）会变得非常大，可以并排放置两个 div ....因此，如果您想保持设计的微小宽度不变，那么让还有一个媒体查询定义该限制max-width:480px;

例如

.fonts{
   font-size:18px;
}
@media screen and (max-width:480px){
    .fonts{
        font-size:10px;
    }
 }
于 2013-08-31T13:48:07.527 回答