FireFox与Chrome CSS div包装错误

时间：2017-08-02 07:01:10

标签： javascript html css google-chrome firefox 

function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}
multiplyNode(document.querySelector("#divp1"), 5, true);
multiplyNode(document.querySelector("#divp2"), 5, true);
multiplyNode(document.querySelector("#divp3"), 5, true);
multiplyNode(document.querySelector("#divp4"), 5, true);
multiplyNode(document.querySelector("#divp5"), 5, true);
multiplyNode(document.querySelector("#divp6"), 5, true);
multiplyNode(document.querySelector("#divp7"), 5, true);
multiplyNode(document.querySelector("#divp8"), 5, true);
multiplyNode(document.querySelector("#divp9"), 5, true);
multiplyNode(document.querySelector("#divp10"), 5, true);

multiplyNode(document.querySelector("#divg1"), 5, true);
multiplyNode(document.querySelector("#divg2"), 5, true);
multiplyNode(document.querySelector("#divg3"), 5, true);
multiplyNode(document.querySelector("#divg4"), 5, true);
multiplyNode(document.querySelector("#divg5"), 5, true);
multiplyNode(document.querySelector("#divg6"), 5, true);
multiplyNode(document.querySelector("#divg7"), 5, true);
multiplyNode(document.querySelector("#divg8"), 5, true);
multiplyNode(document.querySelector("#divg9"), 5, true);
multiplyNode(document.querySelector("#divg10"), 5, true);

multiplyNode(document.querySelector("#divn1"), 63, true);
multiplyNode(document.querySelector("#divn2"), 63, true);
#bin1 {
  width: 960px;
  height: 100px;
  padding: 5px;
  border: 2px solid black;
}
#divNA {
    width: 100%;
    height: 13px;
    padding: 1px;
    float: left
}
#divNA2 {
    height: 13px;
    width: 13px;
    padding: 1px;
    float: left
}
#divn1 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaaa;
    float: left
}
#divn2 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaaa;
    float: left
}
#divg1 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg2 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg3 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg4 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg5 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg6 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg7 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg8 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg9 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg10 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divp1 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp2 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp3 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp4 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp5 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp6 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp7 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp8 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp9 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp10 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="bin1">

    <div id="divNA2"></div>
    <div id="divNA2">A</div>
    <div id="divNA2"></div>
    <div id="divp1"></div>
    <div id="divNA2"></div>
    <div id="divp2"></div>
    <div id="divNA2"></div>
    <div id="divp3"></div>
    <div id="divNA2"></div>
    <div id="divp4"></div>
    <div id="divNA2"></div>
    <div id="divp5"></div>
    <div id="divNA2"></div>
    <div id="divNA2"></div>
    <div id="divp6"></div>
    <div id="divNA2"></div>
    <div id="divp7"></div>
    <div id="divNA2"></div>
    <div id="divp8"></div>
    <div id="divNA2"></div>
    <div id="divp9"></div>
    <div id="divNA2"></div>
    <div id="divp10"></div>
    <div id="divNA2"></div>

    <div id="divNA2"></div>
    <div id="divNA2">B</div>
    <div id="divNA2"></div>
    <div id="divg1"></div>
    <div id="divNA2"></div>
    <div id="divg2"></div>
    <div id="divNA2"></div>
    <div id="divg3"></div>
    <div id="divNA2"></div>
    <div id="divg4"></div>
    <div id="divNA2"></div>
    <div id="divg5"></div>
    <div id="divNA2"></div>
    <div id="divNA2"></div>
    <div id="divg6"></div>
    <div id="divNA2"></div>
    <div id="divg7"></div>
    <div id="divNA2"></div>
    <div id="divg8"></div>
    <div id="divNA2"></div>
    <div id="divg9"></div>
    <div id="divNA2"></div>
    <div id="divg10"></div>
    <div id="divNA"></div>

    <div id="divNA2">C</div>
    <div id="divn1"></div>

    <div id="divNA2">D</div>
    <div id="divn2"></div>
</div>

我试图让一堆方形DIV适合更大的矩形DIV。重要的是他们在特定的DIV上包裹下一行。问题是FireFox在包装之前似乎比Chrome还要多一些空间。

这可以在Chrome上的预期状态中看到： Chrome DIV display 它目前在FireFox上的状态： Chrome DIV display （图片被剪切了不同的填充，但盒子的大小实际上相同）

两张图片使用的代码相同，如下所示：

<!DOCTYPE html>
<style id="css">
#bin1 {
  width: 960px;
  height: 100px;
  padding: 5px;
  border: 2px solid black;
}
#divNA {
    width: 100%;
    height: 13px;
    padding: 1px;
    float: left
}
#divNA2 {
    height: 13px;
    width: 13px;
    padding: 1px;
    float: left
}
#divn1 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaaa;
    float: left
}
#divn2 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaaa;
    float: left
}
#divg1 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg2 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg3 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg4 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg5 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg6 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg7 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg8 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg9 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divg10 {
    width: 13px;
    height: 13px;
    border: 1px solid #aaaaff;
    float: left
}
#divp1 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp2 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp3 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp4 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp5 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp6 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp7 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp8 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp9 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
#divp10 {
    width: 13px;
    height: 13px;
    border: 1px solid #ffaaaa;
    float: left
}
</style>

<div id="bin1">

    <div id="divNA2"></div>
    <div id="divNA2">A</div>
    <div id="divNA2"></div>
    <div id="divp1"></div>
    <div id="divNA2"></div>
    <div id="divp2"></div>
    <div id="divNA2"></div>
    <div id="divp3"></div>
    <div id="divNA2"></div>
    <div id="divp4"></div>
    <div id="divNA2"></div>
    <div id="divp5"></div>
    <div id="divNA2"></div>
    <div id="divNA2"></div>
    <div id="divp6"></div>
    <div id="divNA2"></div>
    <div id="divp7"></div>
    <div id="divNA2"></div>
    <div id="divp8"></div>
    <div id="divNA2"></div>
    <div id="divp9"></div>
    <div id="divNA2"></div>
    <div id="divp10"></div>
    <div id="divNA2"></div>

    <div id="divNA2"></div>
    <div id="divNA2">B</div>
    <div id="divNA2"></div>
    <div id="divg1"></div>
    <div id="divNA2"></div>
    <div id="divg2"></div>
    <div id="divNA2"></div>
    <div id="divg3"></div>
    <div id="divNA2"></div>
    <div id="divg4"></div>
    <div id="divNA2"></div>
    <div id="divg5"></div>
    <div id="divNA2"></div>
    <div id="divNA2"></div>
    <div id="divg6"></div>
    <div id="divNA2"></div>
    <div id="divg7"></div>
    <div id="divNA2"></div>
    <div id="divg8"></div>
    <div id="divNA2"></div>
    <div id="divg9"></div>
    <div id="divNA2"></div>
    <div id="divg10"></div>
    <div id="divNA"></div>

    <div id="divNA2">C</div>
    <div id="divn1"></div>

    <div id="divNA2">D</div>
    <div id="divn2"></div>
</div>

<script id="javascript">
function multiplyNode(node, count, deep) {
    for (var i = 0, copy; i < count - 1; i++) {
        copy = node.cloneNode(deep);
        node.parentNode.insertBefore(copy, node);
    }
}
multiplyNode(document.querySelector("#divp1"), 5, true);
multiplyNode(document.querySelector("#divp2"), 5, true);
multiplyNode(document.querySelector("#divp3"), 5, true);
multiplyNode(document.querySelector("#divp4"), 5, true);
multiplyNode(document.querySelector("#divp5"), 5, true);
multiplyNode(document.querySelector("#divp6"), 5, true);
multiplyNode(document.querySelector("#divp7"), 5, true);
multiplyNode(document.querySelector("#divp8"), 5, true);
multiplyNode(document.querySelector("#divp9"), 5, true);
multiplyNode(document.querySelector("#divp10"), 5, true);

multiplyNode(document.querySelector("#divg1"), 5, true);
multiplyNode(document.querySelector("#divg2"), 5, true);
multiplyNode(document.querySelector("#divg3"), 5, true);
multiplyNode(document.querySelector("#divg4"), 5, true);
multiplyNode(document.querySelector("#divg5"), 5, true);
multiplyNode(document.querySelector("#divg6"), 5, true);
multiplyNode(document.querySelector("#divg7"), 5, true);
multiplyNode(document.querySelector("#divg8"), 5, true);
multiplyNode(document.querySelector("#divg9"), 5, true);
multiplyNode(document.querySelector("#divg10"), 5, true);

multiplyNode(document.querySelector("#divn1"), 63, true);
multiplyNode(document.querySelector("#divn2"), 63, true);
</script>

JSbin链接here。

任何帮助都会非常感激，因为我无法弄清楚这种不一致的根源。

0 个答案:

没有答案
相关问题
最新问题