html - Chrome : Automatic shift of web elements

Question

我正在从事一个网络元素。在过去的两周里，我正在参加学期考试，所以我想休息一下。现在，既然他们都结束了，我又开始工作了；但我发现我的一些网络元素(如按钮、跨度)在 Chrome 上(而不是在 IE 和 Mozilla 上)移动了一些像素。这背后的原因可能是什么？我该如何克服这个问题？

原始代码:http://jsfiddle.net/p22L15vs/15/embedded/result/

chrome 的左边距(按钮)最初是:

-webkit-margin-start:620px;

现在相同的代码使按钮进入一个新行。

跨度的另一个例子:

原始代码:http://jsfiddle.net/vbpasx1j/

fiddle 中显示的文本被放置在 span 标签中。两周前它只需要两行。现在它需要三行。

Answer 1

您好，欢迎来到社区!

首先，在您提供的链接中 -webkit-margin-start:按钮的设置为 620px，而不是 166。
结合菜单 div 的宽度 <div id="div_element">以及元素周围的填充超出了原始 #wrapper 1006px的宽度，使按钮元素跳到下一行。

这是我心目中最重要的解决方案的演示:http://jsfiddle.net/kqxmbcdt/减少 -webkit-margin-start:到 619px 就可以了。

在定位元素时始终注意未考虑的边距和填充，如您所见，有时 1px 足以破坏布局。