làm thế nào để làm cho chiều rộng văn bản giống nhau trong IE và Firefox?

Question

Tôi muốn có một vùng văn bản 500px, đây là CSS tôi sử dụng cho văn bản:

chiều rộng: 498px; đệm: 0px; lề: 0px;

Tôi nhận thấy IE và Chrome có đường viền 1px theo mặc định, mặt khác FF có đường viền 2px dẫn đến văn bản là 502px thay vì 500px, bất kỳ giải pháp nào?

Chỉ cần lưu ý, tôi có thể chỉ định rõ ràng chiều rộng đường viền texarea, ví dụ: border-width: 1px, nhưng vấn đề ở đây là nó không hoạt động độc đáo với IE (đường viền textarea mặc định trong IE không trông ổn khi viền được đặt thành 1px), tôi có thể thay đổi màu viền nhưng tôi không muốn làm điều này, tôi thích giữ kiểu trình duyệt mặc định, tôi chỉ muốn chiều rộng giống nhau trong tất cả các trình duyệt mà không thay đổi kiểu mặc định hoặc đặt màu thành đường viền, điều này có thể không?

Answer 1

Bạn có thể đặt tất cả kiểu mặc định của trình duyệt là giống nhau bằng cách sử dụng trang CSS đặt lại ở đầu tài liệu của bạn. Tôi thích bản thân mình YUI reset CSS. Điều đó sẽ đặt các kiểu cơ sở cho tất cả các điều khiển giống nhau trên tất cả các trình duyệt để bắt đầu và điều đó sẽ cho phép bố cục dễ dự đoán hơn.

IMO nếu bạn để cho mỗi trình duyệt có phong cách riêng của mình (thậm chí có thể được tùy chỉnh bởi người dùng!), Bạn đang trên đường có phong cách không thể đoán trước cho ứng dụng của bạn, với các vấn đề nảy sinh ở những nơi bạn chưa bao giờ nghĩ họ sẽ. Tốt hơn nên sử dụng CSS đặt lại và sau đó tạo kiểu cho ứng dụng của bạn phù hợp. Nếu bạn kiểm tra trang web của yahoo (tham chiếu), họ cũng sẽ có CSS ​​"cơ bản" của riêng mình mà bạn có thể bắt đầu từ đó, điều này khá thú vị.

<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.6.0/build/reset/reset-min.css"> 

Answer 2

Chúng tôi có xu hướng tạo các biểu định kiểu riêng biệt cho IE và FF để tránh xung quanh 'quirks' của chúng. Sau đó, một đoạn mã đơn giản có thể được sử dụng để đảm bảo sử dụng đúng bảng định kiểu.

<!--[if lte IE 6]> works for < than IE 6 
<link href="/css/IE6Below.css" media="screen" rel="Stylesheet" type="text/css" /> 
<![endif]--> 

Ngoài ra còn có các công trình cho IE 6

vv ...

Answer 3

chúng tôi sử dụng jQuery để trang trí các yếu tố html của chúng tôi và để cho nó đối phó với các vấn đề trình duyệt chéo.

Answer 4

Về bản chất, bạn đang chán nản rằng mặc định của trình duyệt không giống nhau với mọi trình duyệt nhưng không muốn tự mình thay đổi trực tiếp các thuộc tính đó.

Điều này không có ý nghĩa.

Giống như những người khác tôi khuyên bạn nên sử dụng biểu định kiểu đặt lại (Tôi là người hâm mộ lớn của Eric Meyer) và sau đó tạo kiểu cho đường viền chính xác như cách bạn muốn. Dễ dàng. Thông thoáng. Không có nhược điểm.