Webkit渲染动态内容的bug

时间:2012-05-10 12:35:51

标签: javascript google-chrome safari webkit rendering

当我使用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)呈现。其他浏览器没有此渲染错误。

有谁知道这是否会在不久的将来得到解决? 或者解决这个浏览器问题会更好吗?

0 个答案:

没有答案