Question

＆＃13;

span {
  float: left;
  width: 200px;
}

＆＃13;

<ul>
  <li><span>test</span></li>
</ul>

＆＃13;

在firefox vs chrome中看一下这个，chrome会在浮动的span元素后显示子弹。

我不确定这里发生了什么，似乎浮动正在逃避webkit中的列表项。有人遇到这个并知道解决方案吗？

Answer 1

正如@silviagreen所指出的，这是一个webkit-specific bug，但作为一种解决方法，我建议在列表项中添加透明边框。这似乎正常工作（但老实说，我承认我无法弄清楚为什么这应该有效）

li {
   border: 1px transparent solid;
}

https://jsfiddle.net/rjkz7ny1/

将float: left更改为display: inline-block或将clear: left更改为列表的其他方法suggest，但我觉得这些变通办法有点过于庞大（并不总是适用）而不是添加一个明确的边界。

Answer 2

可以使用带有counter列表ol的伪元素来避免错误并使用border s

span {
  float: left;
  width: 200px;
}
ol {
  counter-reset:marker;
  }
li {
  counter-increment:marker;
  list-style-type:none;
  box-shadow:0 2px gray;
  }
li:before {
  content:'\02022 ';
  padding-right:0.25em;
  float:left;
  }
ol li:before {
  content:counter(marker)'. ';
  }
hr ~* li:before {
  text-indent:-1em;
  }
li:after {
  content:'';
  display:table;
  clear:both;

<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>
<hr/>
<ul>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ul>
<ol>
  <li><span>test</span></li>
  <li><span>test</span></li>
</ol>

webkit显示列表中浮动元素后面的子弹

2 个答案: