当我使用javascript更改span的内容时,此更改不会在Webkit浏览器中呈现。
这仅适用于包装跨度相对定位,包含一个绝对定位并具有固定宽度和高度的内跨距。
以下是该错误的最简单示例(在Chrome或Safari等Webkit浏览器中查看)
<!DOCTYPE HTML>
<html>
<head>
<title>Webkit render bug</title>
<style type="text/css">
.wrapper {
position: relative;
}
#absolute-block {
display: block;
position: absolute;
width: 152px;
height:42px;
background-color: #EEEE00;
color: #FF0000;
}
</style>
</head>
<body>
<h1>Webkit render bug</h1>
<button onclick="document.getElementById('absolute-block').innerHTML = 'Update test';">Update test</button>
<span class="wrapper">
Some content
<span id="absolute-block">Absolute-block</span>
</span>
</body>
</html>
单击该按钮将替换DOM树中的span的内容,但这不会由基于webkit的浏览器(如Chrome和Safari)呈现。其他浏览器没有此渲染错误。
有谁知道这是否会在不久的将来得到解决? 或者解决这个浏览器问题会更好吗?