thể trùng lặp:
padding is not working in Safari and IE in select listPadding không hoạt động trên một số thẻ trong Safari
Vì vậy, tôi có một lựa chọn thẻ cơ bản như sau:
<select>
<option>1</option>
<option>2</option>
<option>2</option>
</select>
Nhưng nếu Tôi đặt đệm vào thẻ được chọn, nó không hoạt động trên Safari:
select {
padding: 6px;
}
Trên IE7, tôi hiểu, nhưng trên Safari? Có cách nào để giải quyết vấn đề này không?
trả lời trước đây: https://stackoverflow.com/a/2967371/181002
Webkit đã lấy nó khi mình để không cho phép đệm cho select -items, nhưng bạn có thể đạt được hiệu quả tương tự bằng cách sử dụng một đơn giản 'hack', bao gồm việc áp dụng line-height và text-indent để bạn selectitem.
Dưới đây là một ví dụ: http://jsfiddle.net/B858P/
Tôi muốn thích xem ví dụ jsFiddle của bạn nhưng tôi nghĩ rằng liên kết bị hỏng. – catandmouse
Vâng, có vẻ như jsFiddle đã ngừng hoạt động. Đây là một jsBin tương đương: http://jsbin.com/eleduj/2/edit Được cảnh báo mặc dù, hack này là khá nhiều webkit độc quyền, kể từ khi văn bản thụt lề dường như gửi biểu tượng chọn ít bên ngoài của hộp trong Firefox, và dòng chiều cao không làm gì cả, điều đó có nghĩa là bạn có thể bị buộc phải thực hiện tất cả các loại gọn gàng CSS hacks để làm cho nó hoạt động trên trình duyệt, và tại thời điểm đó, có lẽ bạn nên xây dựng hộp chọn tùy chỉnh của riêng mình : http://weblogs.asp.net/jaimedelpalacio/archive/2008/11/22/custom-html-dropdown-control-part-1.aspx –
Tôi chỉ tự hỏi lý do đằng sau việc không cho phép đệm cho trình duyệt webkit là gì? Dù sao, trong Chrome hiển thị padding, vấn đề chỉ xảy ra trong Safari. Tôi sẽ thử giải pháp của bạn anyway. – catandmouse
thấy http://stackoverflow.com/questions/2966855/padding-is-not-working-in-safari-and-ie-in-select-list – Luca