Không gian bổ sung trong vùng văn bản, khác với các trình duyệt

Question 1

Có một số không gian thừa dưới thẻ textarea. Từ 1 đến 4 pixel trong các trình duyệt khác nhau. Đánh dấu rất đơn giản:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html>
    <head>
        <style>
            body {
                margin: 0;
                padding: 0;
            }
            .main {
                background-color: red;
            }
            textarea {
                background-color: gray;
                resize: none;
                margin: 0;
                border: 0 none;
                padding: 10px;
                height: 50px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
        <div class="main">
            <textarea></textarea>
        </div>
    </body>
</html>

Đây là cách nó được hiển thị trong các trình duyệt:

Ảnh chụp màn hình

Tại sao chuyện này đang xảy ra? Làm thế nào để loại bỏ không gian thừa này?

Question 2

Thêm vertical-align: topvào textarea.

Lý do cho khoảng trống là đó textarealà một phần tử inline(hoặc inline-block), và khoảng trống là không gian dành riêng cho các dấu xuống trong văn bản. Tôi không biết chính xác lý do tại sao khoảng cách giữa các trình duyệt khác nhau.

Question 3

Trong trường hợp của tôi, câu trả lời của ba mươi không hoạt động tốt với <div>đường viền dưới cùng của cha mẹ .

display: block phù hợp với tôi mặc dù.