Question

textarea滚动条和边框的一部分被切断：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Clipped Scrollbar and Border in Webkit</title>
    <style>
        textarea,
        iframe {
            display: block;
            width: 300px;
            margin: 0;
            padding: 0;
        }
        textarea {
            height: 200px;
            resize: none;
            outline: 0;
            border: solid red;
            border-width: 0 0 5px;
        }
        iframe {
            height: 0;
            border: 0;
        }
    </style>
</head>

<body>
    <textarea>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
        <p>Hello, world!</p>
    </textarea>
    <iframe srcdoc="<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>"></iframe>
</body>

</html>

DEMO

为什么会这样？有什么问题？

Answer 1

修改

鉴于您已设置iframe's height:0，您可以将opacity设置为0，但请display:block和{{1} }}

DEMO

srcdoc

Webkit中剪切的滚动条和边框

1 个答案: