Chrome在最后一个子项更改时不更新样式

cbeh67ev  于 12个月前  发布在  Go
关注(0)|答案(4)|浏览(157)

问题

由于使用JavaScript动态添加了额外的元素,当last-child更改时,样式不会更新。

示例

点击下面代码片段中的“添加更多块”。当添加新块时,第四个.block元素(“测试块4”)将不会有底部红色边框,即使它不再是#container中的最后一个元素。

$("#addMore").one("click", function() {
  $("#container").append($("#container").html());
  $(this).remove();
});
.block {
  border-bottom: 1px solid red;
  counter-increment: block;
  margin: 20px 0;
  position: relative;
}
.block:after {
  content: " " counter(block);
}
.block:last-child {
  border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
</div>
<div id="addMore">Add more blocks</div>

JS Fiddle

预期行为

点击“Add more blocks”后,所有.block元素都应该有一个底部红色边框 *,除了 * 第八个块(“Test block 8”)。

影响的浏览器

已在Chrome 55.0.2883.87 m中测试但无法正常工作。IE 11.0.9600.18538和Firefox 50.1.0返回的预期行为。
这个问题可以解决 * 没有 *:

  • 使用JavaScript(即动态添加一个类,删除最后一个元素的红色边框)?
  • 重新构造CSS以不使用last-child(即使用first-childborder-top代替)?
ycl3bljg

ycl3bljg1#

作为一种变通方法,您可以将last-child伪类替换为nth-last-child(1),它与last-child做的事情完全相同,但不受该错误的影响。

$("#addMore").one("click", function() {
  $("#container").append($("#container").html());
  $(this).remove();
});
.block {
  border-bottom: 1px solid red;
  counter-increment: block;
  margin: 20px 0;
  position: relative;
}
.block:after {
  content: " " counter(block);
}
.block:nth-last-child(1) {
  border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
</div>
<div id="addMore">Add more blocks</div>
lvmkulzt

lvmkulzt2#

我在Chrome 55.0.2883.87中进行了测试,它让我感到困惑-显然是一个bug。
即使我在.html()上使用.clone(),问题仍然存在:

$("#container").append($("#container > .block").clone());

字符串
一个可能的 * 修复 * 可能是 * 强制 * container的 * 重新渲染 *-我用这个来重新渲染:

$('#container').hide().show(0);


请参见下面的演示:

$("#addMore").one("click", function() {
  $("#container").append($("#container > .block").clone());
  // fix: by forcing re-rendering
  $('#container').hide().show(0);
  $(this).remove();
});
.block {
  border-bottom: 1px solid red;
  counter-increment: block;
  margin: 20px 0;
  position: relative;
}
.block:after {
  content: " " counter(block);
}
.block:last-child {
  border-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
</div>
<div id="addMore">Add more blocks</div>
ha5z0ras

ha5z0ras3#

稍微处理一下这个问题就暗示了Chrome浏览器中存在一些错误。
但是我注意到,如果我们使用border-top而不是border-bottom,那么它就可以正常工作。

CSS:

.block:not(:first-child) {
  border-top: 1px solid red;
}

字符串

$("#addMore").one("click", function() {
	$("#container").append($("#container").html());
	$(this).remove();
});
.block {
  counter-increment: block; 
  padding: 20px 0;
  position: relative;
  margin-bottom: 1px;
}
.block:after {
  content: " " counter(block);
}
.block:not(:first-child) {
  border-top: 1px solid red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="container">
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
  <div class="block">Test block</div>
</div>
<div id="addMore">Add more blocks</div>
34gzjxbg

34gzjxbg4#

我在使用css样式td:last-child和border-right向表中动态添加行时也遇到过类似的问题,当页面首次加载时它可以工作,但一旦额外的<tr>元素被添加到表中,新的和现有的行有时会呈现为没有右边框。
我把它换成了td:last-of-type,它看起来工作得很好。

相关问题