我看到这个问题，如果我切换 float 元素或嵌套在其中的元素的 innerHTML，一旦我从空字符串切换回任何文本或标记，它就会 float 到容器外。奇怪的是，在下面的示例中，如果我从内联 CSS 中删除文本转换，问题就会消失。
这发生在 OS X 10.6.5 的 Chrome 9.0.597.19 和 Safari 5.0.3(WebKit build 6533.19.4)中。
知道这是 WebKit 错误还是其他问题吗？
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Safari Float Bug</title>
<style type="text/css">
.titlebar {
background: #eee;
width: 400px;
padding: 10px;
text-transform: uppercase; /* If you remove this line, the right side link no longer floats outside the container. */
}
</style>
</head>
<body>
<p>
<a href="#" id="clicked">Clicker</a>
</p>
<div class="titlebar">
<span style="float: left;">Title</span>
<a href="#" id="rightlink" style="float: right;">Right Side Link</a>
<br style="clear: both;" />
</div>
<script type="text/javascript">
function toggler() {
var rightlink = document.getElementById("rightlink");
if (rightlink.innerHTML == "") {
rightlink.innerHTML = "Right Side Link";
}
else {
rightlink.innerHTML = "";
}
}
document.getElementById("clicked").addEventListener("click", toggler, false);
</script>
</body>
</html>
最佳答案
您是否尝试过将单词手动添加为“RIGHT SIDE LINK”而不是大写？可能是您正在呈现的字体(在 Webkit 中)使您的大写字母占用更多空间，并打破了容器的边界。您可能需要在链接上设置字符限制或创建添加 display:block 到您的 CSS anchor 标记。
关于javascript - 在 float 元素的 WebKit 中的空字符串和完整字符串之间设置 innerHTML 会导致溢出，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4453530/