Question

我有以下问题：

我正在制作这个网站......我正在使用HTML和CSS。我一直在尝试尽可能地保持CSS标准，并检查我使用三种主要浏览器：chrome，firefox和ie。在我的电脑中它似乎工作正常（除了细节）。但是，当其他人在其他屏幕尺寸中打开它时，事情就会失控。有谁知道为什么会发生这种情况？看看我正在谈论的是主页：

www.britobmarketing.com/ledtogo/index.html

我敢打赌，在你的一些电脑中它会有点不对齐，但在我看来它看起来很完美。压力很大!!!

另外，正如我所说，我正在努力保持CSS标准，以便每个浏览器都可以查看它。但是像Firefox这样的浏览器并没有识别出除了视频之外的三个按钮的“圆边”效果。它确实对其余部分起作用，这让我感到困惑！任何人都知道为什么会发生这种情况？

非常感谢您的时间和帮助!!

Answer 1

这是不浏览器渲染引擎不同的问题。

您没有考虑视口的可变宽度。页眉和页脚是居中的，您的内容是固定的。因此，当视口变宽时，页眉页脚会停留在中心并向左滑动。

因此，对于您的内容，问题出在此处：

#indexcontainter {
  width: 980px;
  height: 390px;
  float: none;
  margin-left: 170px;
}

在标题中，margin: auto是居中的对象，使左右边距自动相等。但是对于内容，您需要在170px处对左边距进行硬编码。

将其更改为使用automargins，它开始变得很好：

#indexcontainter {
  width: 980px;
  height: 390px;
  float: none;
  margin: auto;
}

是否有针对所有浏览器编码CSS的标准方法？

1 个答案: