Question

我有一个服务器端创建的HTML结构，需要通过jQuery重新创建和交换（请不要问为什么......）。

但奇怪的是，当它被替换时，我也有完全相同的HTML结构，左边有一些元素的微小移动。

我不知道为什么会这样。特别是在提取之后，可以在小提琴中重新创建它。

你看到任何潜在的解决方案吗？

如果我在问题中发布所有代码，我认为不会有帮助。因此我只发布CSS。但是如果你想看到它，请告诉我。

.article_overview {
    background-color: #f6f6f6;
    width: 465px;
}

.article_overview .summaryRow {
    padding: 15px 10px 0;
    color: #838383;
}
.article_overview .articleRow {
    padding-bottom: 20px;
    border-bottom: 1px dotted #d9d9d9;
}
.article_overview .counter {
    padding-bottom: 8px;
}
.article_overview .articleRow img {
    max-width: 60px;
}

.article_overview .image {
    float: left;
    margin-right: 10px;
    overflow: hidden;
}
.article_overview .text {
    width: 84%;
    display: inline-block;
    position: relative;
    min-height: 60px;
}
.article_overview .information {
    width: 60%;
    display: inline-block;
}
.article_overview .articleAmount,
.article_overview .priceTotal {
    display: inline-block;
    vertical-align: top;
}
.article_overview .articleAmount {
    width: 18%;
    text-align: center;
}
.article_overview .priceTotal {
    width: 19%;
    text-align: right;
}
.article_overview .articleNr {
    position: absolute;
    bottom: 0;
    left: 0;
}

Answer 1

问题是这个

<span>Lorem ipsum</span>
<span>Lorem ipsum</span>

不等于此

<span>Lorem ipsum</span><span>Lorem ipsum</span>

如果你破解了行，浏览器会在span之间添加空格。

使用jQuery，你append编辑了它，所以它没有打破span之间的界限。

哈哈！

要解决您的问题，请在初始HTML代码（Html，而不是jQuery）中删除内联元素之间的空格，例如span

Answer 2

您正在更改结构。您可以在<div> div之前添加空.summaryRow。我认为这是由这一行产生的：

   var sAllProducts = jQuery('<div>');

要避免这种情况，请在添加后尝试unwrap()所有内容。查看更多：

https://api.jquery.com/unwrap/

HTML的小转变取代了jQuery

2 个答案: