动态加载元素并直接通过服务器时，CSS负边距差异(CSS negative margin difference when loading elements dynamically and straig

动态加载元素并直接通过服务器时，CSS负边距差异(CSS negative margin difference when loading elements dynamically and straight through the server)

当从服务器直接加载并通过CSS动态加载时，元素的位置不同。

我在两种情况下使用相同的CSS类但结果不同。

margin-bottom设置为-40px ，当我通过PHP加载元素并通过jQuery动态加载元素时，元素的位置不同。

CSS类：

.iconView .adLocation { background-color: rgba(0,0,0,0.3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #FFF; height: 18px; font-size: 13px; position: absolute; margin-top: -40px; width: 188px; }

我通过chrome dev工具检查了元素的CSS，并将margin-top正确设置为40px 。 我不能发布预览不够的声誉。 SRY。

The position of the element differs when loading straight from server and dynamically through CSS.

I am using the same CSS class on both occasions but different results.

The margin-bottom is set to -40px, the location of the element is different when I am loading the element through PHP and dynamically through jQuery.

The CSS class:

.iconView .adLocation { background-color: rgba(0,0,0,0.3); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; color: #FFF; height: 18px; font-size: 13px; position: absolute; margin-top: -40px; width: 188px; }

I inspected the CSS of the element via chrome dev tools & margin-top is set properly to 40px. I can't post a preview not enough reputation. sry.

最满意答案

由于你已经定义了你的元素位置绝对，所以你可以使用top: -40px; 而不是使用margin-top: -40px;

As you have defined your element position absolute, so you can use top: -40px; instead of using margin-top: -40px;