css - 谷歌浏览器中的边距和宽度问题

Question

我正在设置我的 div 的 margin 和 width，所有 margin 和 width 都在 Firefox 中正确显示并且IE浏览器。但是，谷歌浏览器无法正常工作。 如果我在 Chrome 中检查页面并调整我的 margin，它会显示效果，但如果我更新我的 CSS，它就不起作用。

我也在使用 -webkit-margin-start: 44px; 但没有任何效果。

我的 CSS 如下:-

#main {
  position:relative;
  width:1200px !important;
  min-height:800px;
  margin:44px auto;
  top: 7px;
  left: 2px;
  -webkit-margin-start: 44px;             
}

任何建议，它也不适用于此 @media 屏幕和 (-webkit-min-device-pixel-ratio:0) { 如果我声明 margin ...

截图如下:- 对于 Chrome

Firefox

提前致谢。

Chrome 版本:62.0.3202.62

Answer 1

正如我在评论中所说，您使用 margin:44px auto 这意味着 margin-top:44px margin-right:auto margin-bottom:44px margin-left:auto 。但是 -webkit-margin-start:44px 指的是 margin-left

margin-top 是 -webkit-margin-before。但这主要指的是文本边距，它取决于书写模式、方向和文本方向，如您在此处所见 margin dev moz或者你可以在 SO 中搜索类似的问题

您的代码似乎有效(参见下面的代码片段)。我看到的唯一问题是您使用头寸和 margin 。 (顶部，左侧 + 边距)。我建议您要么使用仓位，要么使用 margin 。例如，不要使用 top:7px 而是使用 margin:51px auto 44px(如果你想将底部边距保持为 44px)。

没有您的代码，我们将无能为力。如果问题仍然存在，请添加一个可复制您的问题的工作片段

我在 webkit-margin-start 下面的代码中更改了 webkit-margin-before ，如前所述

#main {
  position:relative;
  width:1200px !important;
  min-height:800px;
  margin:44px auto;
  top: 7px;
  left: 2px;
  -webkit-margin-before: 44px;     
  background:red;
}
body { margin:0}

<div id="main">

</div>