Tại sao Chrome, Firefox và IE đều hiển thị các điều khiển SELECT có chiều rộng cố định khác nhau?

Tôi đang mất tóc trên trang này ... có vẻ như khi tôi sửa chiều rộng, điều khiển HTML SELECT sẽ hiển thị chiều rộng của nó khác nhau tùy thuộc vào trình duyệt.Tại sao Chrome, Firefox và IE đều hiển thị các điều khiển SELECT có chiều rộng cố định khác nhau?

Bất kỳ ý tưởng nào về cách chuẩn hóa tính năng này mà không phải chuyển sang nhiều trang mẫu?

Dưới đây là những gì tôi đang làm việc với:

.combo 
{ 
    padding: 2px; 
    width: 200px; 
} 

.text 
{ 
    padding: 2px; 
    width: 200px; 
}

Đây là loại tài liệu của tôi cho trang:

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

Nguồn

2008-09-25 mattruma

Điều khiển biểu mẫu sẽ luôn ít tuân theo các nỗ lực tạo kiểu, trong các lựa chọn cụ thể và đầu vào tệp, do đó cách duy nhất để tạo kiểu cho trình duyệt chéo đáng tin cậy và trong tương lai là thay thế chúng bằng JavaScript hoặc Flash và bắt chước chức năng của họ

Nguồn

2008-09-26 19:56:58

Hãy chắc chắn rằng bạn xóa toàn bộ lề mặc định và đệm, và định nghĩa chúng một cách rõ ràng. Đảm bảo bạn đang sử dụng DOCTYPE thích hợp và do đó hiển thị IE ở Chế độ Chuẩn.

Nguồn

2008-09-25 18:30:07

Tôi đưa DOCTYPE vào câu hỏi ban đầu của tôi ... điều này có đúng không? – mattruma

Vâng, DOCTYPE có vẻ tốt. –

Thử đặt font-size trên các lựa chọn, điều này có thể ảnh hưởng đến cách chúng được hiển thị. Đồng thời xem xét các thuộc tính min-width và max-width.

Nguồn

2008-09-25 18:30:17

OP muốn một chiều rộng cố định mặc dù và không phải là một chiều rộng biến. I ++ 'd u vì kích thước phông chữ nhưng * -width không có ý nghĩa. – MDCore

Không thực sự nhớ về năm 2008, nhưng ngày nay chiều rộng tối đa đã khắc phục được sự cố cho "chọn". + 'd này! – Zuul

Bạn có thể sử dụng tiện ích con thả xuống giả và thay thế CHỌN.

Nguồn

2008-09-25 18:32:04

Hãy thử sử dụng Firebug hoặc tính năng "Kiểm tra yếu tố" của Chrome (nhấp chuột phải vào điều khiển chọn, nhấp "kiểm tra phần tử") để xem chính xác thuộc tính kiểu nào được kế thừa/hiển thị cho đối tượng cụ thể đó. Điều đó sẽ dẫn bạn đi đúng hướng.

Nguồn

2008-09-25 18:35:35 Ryan

Tôi đã thử tất cả các đề xuất này ... và cuối cùng tôi có nó để có vẻ tốt trong IE và Firefox. Hình như có điều gì đó sai với padding trên điều khiển SELECT. Nếu tôi tăng chiều rộng của SELECT bằng 2 pixel, kích thước hiện tại chính xác.

.combo 
{ 
    padding: 2px; 
    width: 206px; 
} 

.text 
{ 
    padding: 2px; 
    width: 200px; 
}

Tuy nhiên, Chrome vẫn không hiển thị cùng kích thước.

Nguồn

2008-09-25 20:17:47 mattruma

Điều gì @Radu cho biết: kiểm soát biểu mẫu giới hạn tùy chọn tạo kiểu của bạn. Tìm một Javascript < select > thay thế. – MDCore

Trình duyệt có xu hướng giới hạn số lượng bạn có thể tạo kiểu điều khiển biểu mẫu bằng CSS, vì điều khiển biểu mẫu có nhiều kiểu dáng phức tạp khác nhau giữa các hệ điều hành. CSS không thể mô tả đầy đủ, do đó các trình duyệt đặt một số giới hạn đó.

Eric Meyer đã viết một bài viết tốt về đề tài này:

http://meyerweb.com/eric/thoughts/2007/05/15/formal-weirdness/

Điều tốt nhất bạn có thể làm là chấp nhận bạn không hoàn toàn kiểm soát giao diện của các trường biểu mẫu và thử nghiệm với bất cứ phong cách là thực sự quan trọng.

Nguồn

2008-11-25 17:56:22

nhập [loại = văn bản], chọn { đường viền: solid 1px # c2c1c1; chiều rộng: 150px; đệm: 2px; }

// sau đó

chọn { width: 156px; // cần phải được đầu vào [type = text] chiều rộng + (đường viền và đệm) }

/* Các đầu vào [type = text] width = chiều rộng + đệm + biên giới

Các chọn chiều rộng chỉ bằng chiều rộng. Đệm và đường viền được hiển thị bên trong ràng buộc chiều rộng đó. Đó chỉ là cách SELECT cuộn ...

Nguồn

2011-02-21 18:36:51 Martinator

Martinator là chính xác.

Có vẻ như bạn đang cố gắng kiểm soát chiều rộng của nhiều loại đầu vào hoặc menu khác nhau trên các trình phát. Bạn có thể trực tiếp chọn đối tượng và chỉ định chiều rộng. Ví dụ:

select { 
    width:350px; 
}

Hoặc bạn có thể làm điều này với vùng văn bản:

select { 
     width:350px; 
}

Các loại đầu vào đòi hỏi cú pháp Martinator đề cập đến. Vì vậy, đối với đầu vào văn bản, đầu vào hoặc thậm chí là loại tệp, bạn sẽ thực hiện việc này cho mỗi loại:

input[type=text] { 
     width:350px; 
} 

input[type=input] { 
     width:350px; 
} 

input[type=file] { 
     width:350px; 
}

Nguồn

2012-04-25 23:07:56 cheekybastard

Tại sao Chrome, Firefox và IE đều hiển thị các điều khiển SELECT có chiều rộng cố định khác nhau?

Trả lời

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