HTML5网站溢出-x [重复]答案

【问题标题】：HMTL5 Website Overflow-x [duplicate]HTML5网站溢出-x [重复]
【发布时间】：2013-06-06 02:25:18
【问题描述】：

我最近上线了我的“alpha”阶段网站 - http://www.elegantdesigns.comule.com/

我使用媒体查询在移动支持的情况下对其进行了全面编码。当在浏览器中查看并缩小宽度时，它可以完美地工作。但是，当我在宽度为 720 像素的移动设备（三星 Galaxy Note 2）上使用它时，所有内容的右侧都有一个空间，仅由页面背景填充。

我使用了 100% 的宽度，我还为多个元素设置了 overflow-x 隐藏。

使用上面的链接自行查看。

这就是网站在我的设备上的样子。

http://i.stack.imgur.com/27wJc.png

有人有什么想法吗？

这里是控制网站主要移动部分的所有样式表的链接。 - http://elegantdesigns.comule.com/mobilestyle.css - http://elegantdesigns.comule.com/tabstyle.css

这是控制标题的html：

<html>
<head>
    <title>Flat Designs</title>
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" type="text/css" media="only screen and (min-width: 811px)"href="mainstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 810px) and (min-width: 721px)" href="tabstyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 720px) and (min-width: 521px)" href="mobilestyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 520px) and (min-width: 431px)" href="tinystyle.css">
    <link rel="stylesheet" type="text/css" media="only screen and (max-width: 430px) and (min-width: 1px)" href="smalleststyle.css">
    <link rel="shortcut icon" href="http://www.iconj.com/ico/9/e/9ecev208p2.ico" type="image/x-icon" />

    <link href='http://fonts.googleapis.com/css?family=Ropa+Sans:400italic' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>

</head>

【问题讨论】：

标签： css html mobile media-queries fluid-layout

【解决方案1】：

罪魁祸首似乎在于您如何为页脚中的元素设置样式。在这种情况下，删除相对定位以及 left 属性可以解决问题。

about {
  position: relative; /* You don't need this */
  left: 30%; /* Removing this property fixes the overflow/width issue */
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
}

您正在对页脚中的所有元素使用相对定位，但没有明显的目的。以#about 元素为例；为了实现您所要达到的目标，您最好删除 relative 定位，连同百分比 left 值，并简单地设置 text-alignproperty 到 center。

about {
  color: #666;
  font-family: 'Source Sans Pro', sans-serif;
  letter-spacing: 1px;
  text-align: center;
}

如果您希望在文档流之外更好地控制元素的定位，则应仅使用相对定位。

【讨论】：

非常感谢！我浏览并删除了它们，直到我将其缩小到页脚/内容中的几个。我不完全明白为什么会发生这种情况？有什么合乎逻辑的原因吗？
啊，感谢您的建议，我发现了这个问题，这也是我的导航栏居中方式的问题。我通过创建另一个 div 使用桌面技术，并将其设置为从左侧开始的 50%，同时还将导航栏设置为 -50%，这有效地使整个事物居中。
好东西！这是一篇关于 A List Apart 的关于 CSS 定位的精彩文章。对于任何从事前端开发的人来说，它都是一个很好的资源。除非您想将元素拉出正常的文档流，否则您永远不需要使用定位。您应该掌握定位并了解top: 50px和margin-top: 50px等之间的区别。