Firefox/Safari thiết lập chiều cao như [quy định chiều cao - đệm - biên giới] cho đầu vào [loại nút =]

Khi tôi sử dụng CSS sau đây:Firefox/Safari thiết lập chiều cao như [quy định chiều cao - đệm - biên giới] cho đầu vào [loại nút =]

input[type=button] { 
    background-color: white; 
    border: 1px solid black; 
    font-size: 15px; 
    height: 20px; 
    padding: 7px; 
}

với HTML này:

<input type="button" value="Foo" />

tôi mong đợi để thấy điều này, vì vậy tổng chiều cao trở thành 36px:

1px border 
7px padding 
20px content (with 15px text) 
7px padding 
1px border

Nhưng thay vì cả Firefox 3.6 và Safari 4 sh ow này: (Chưa được thử nghiệm trong các trình duyệt khác)

Screenshot http://labs.spiqr.nl/upload/files/1223ef9cbae3ab6e43bd1f9215ebedb157ac7b22.png

1px border 
7px padding 
4px content (with 15px text) => height - 2 * border - 2 * padding 
7px padding 
1px border

Có ai có bất kỳ ý tưởng tại sao điều này xảy ra?

Nguồn

2010-02-14 Douwe Maan

Hình ảnh liên kết bị phá vỡ (! Sử dụng imgur) D –

yếu tố mẫu có truyền thống đã có một width/height bao gồm đệm của họ/biên giới, bởi vì họ đã được thực hiện ban đầu bởi các trình duyệt như widget UI OS-bản xứ, nơi CSS không có ảnh hưởng đối với các đồ trang trí.

Để tái tạo hành vi này, Firefox và những người khác làm cho một số lĩnh vực hình thức (chọn, nút/input-type-nút) với CSS3 box-sizing phong cách thiết lập để border-box, do đó width tài sản phản ánh toàn bộ chiều rộng khu vực render bao gồm biên giới và đệm.

Bạn có thể vô hiệu hóa hành vi này với: (. Hay, mà là phổ biến hơn cho bố trí dạng lỏng mà bạn muốn sử dụng '100%' chiều rộng, bạn có thể đặt những người khác để border-box)

select, button { 
    box-sizing: content-box; 
    -moz-box-sizing: content-box; 
    -webkit-box-sizing: content-box; 
}

Các phiên bản tiền tố trình duyệt phải ở đó để bắt các trình duyệt đã triển khai thực hiện điều này trước khi quá trình chuẩn hóa đạt được. Điều này sẽ không có hiệu quả trên IE6-7, mặc dù.

Nguồn

2010-02-14 11:22:35 bobince

Cảm ơn rất nhiều! Làm việc như một sự quyến rũ –

tuyệt vời! không biết điều đó, cảm ơn. – Sinan

Tôi sẽ bỏ phiếu này nhiều hơn một lần nếu có thể. –

Một số điều bạn có thể thử (Thậm chí nếu nó được dự kiến hành vi, logic đằng sau nó là gì?):

Đặt doctype của tài liệu (<!DOCTYPE html>)
Đặt đầu vào là display:block hoặc display: inline-block
Sử dụng reset stylesheet.

Nguồn

2010-02-14 11:18:23 Marius

Đã thử những tùy chọn, không làm việc. –

Thay đổi DOCTYPE từ HTML4 Chuyển sang HTML5 làm việc cho tôi. – TataBlack

Điều này có ý nghĩa bởi vì chiều cao của phần tử tự nhiên nhiều hơn so với thứ bạn đặt. các yếu tố đầu vào được gán một chiều cao, trong trường hợp này, là đủ để chứa văn bản của phần tử của bạn nhưng bạn đặt nó thành một số lượng nhỏ hơn. Để hiển thị điều này, hãy xóa cài đặt độ cao của bạn.

Nguồn

2010-02-14 11:25:07 Rob

Các yếu tố khác hoạt động như tôi đã nói: Tổng chiều cao là 'border-top + padding-top + height + padding-bottom + border-bottom'. –

Tôi đã làm cho nó hoạt động loại bỏ phần đệm của nút đầu vào và đặt chiều cao khoảng 20. sau đó điều chỉnh chiều cao, phần đệm của phần tử neo. Tôi cũng đặt chiều cao dòng, cỡ phông chữ và họ phông chữ.

làm việc trên FF, IE, Safari và Chrome:

Nguồn

2010-09-30 11:07:44 Rahatur

Firefox/Safari thiết lập chiều cao như [quy định chiều cao - đệm - biên giới] cho đầu vào [loại nút =]

Trả lời

Các vấn đề liên quan