Webkit 中的裁剪滚动条和边框答案

【问题标题】：Clipped Scrollbar and Border in WebkitWebkit 中的裁剪滚动条和边框
【发布时间】：2014-05-05 06:29:33
【问题描述】：

部分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

为什么会这样？解决方法是什么？

【问题讨论】：

标签： html css webkit textarea scrollbar

【解决方案1】：

编辑

鉴于您已经设置了iframe'sheight:0，您可以将其opacity 设置为0，但保留display:block 和srcdoc。

DEMO

textarea {

    display:block;
    width:300px;
    margin:0;
    padding:0;

}

iframe {

    opacity:0;
    height:0;
    border:0;

}

【讨论】：

我需要将它们与display:block 一起使用。此外，它会在您的演示中的文本区域的右侧/底部产生一个奇怪的伪影。
我也需要srcdoc 属性。