7

Tôi hiện đang làm việc để phát triển một trang web và tôi không thể hiểu tại sao văn bản hiển thị lớn hơn trong IE10 so với trong Chrome. (Tôi đã đảm bảo rằng cả hai trình duyệt đều được đặt thành 100% thu phóng - không nhiều hơn, không ít hơn.)Tại sao "font-size: 1em" lớn hơn trong IE10 so với Chrome?

Tôi đã đặt lại trong CSS: body { font-size: 1em; }. Trong Chrome (v27.0.1453.116 m), điều này hiển thị như mong đợi - nếu tôi thay đổi quy tắc đó trong CSS thành font-size: 100%; hoặc font-size: 16px;, không có gì thay đổi rõ rệt. Điều này, với tôi, cho biết rằng trong Chrome, 1em = 16px. Nhưng kích thước phông chữ tỷ lệ (em%) hiển thị lớn hơn nhiều trong IE, ở những gì dường như là 1em = 21px.

Tôi có hai hình ảnh hiển thị sự khác biệt khi body { font-size: 1em; }, nhưng vì tôi chưa có 10 danh tiếng, tôi không thể đăng URL đầy đủ. Họ đang được lưu trữ trên imgur, mặc dù, và tên tập tin của họ như sau:

  • font-size: 1em; trong Chrome:

enter image description here

  • font-size: 1em; trong IE10:

enter image description here

Nếu tôi đặt font-size sử dụng px, thì tôi nhận được kết quả nhất quán - cả Chrome và IE10 sẽ hiển thị nhất quán. Tuy nhiên, việc sử dụng px để kích thước phông chữ đánh tôi là thực tiễn ít được ưa thích hơn trong những ngày này.

Bạn có thể xem HTML và CSS trong this jsFiddle I made. Tôi bao gồm tất cả CSS, có thể có một chút không cần thiết, nhưng tôi nghĩ sẽ tốt hơn nếu cung cấp nhiều ngữ cảnh hơn là ít hơn.

Bất kỳ ai cũng có thể giúp tôi tìm ra lý do tại sao IE10 hiển thị số lượng lớn hơn Chrome một chút và tôi có thể làm gì không?

Cảm ơn một nhóm.

EDIT - Số liệu ngay sau khi tôi đăng câu hỏi phức tạp này, tôi sẽ tìm hiểu điều gì đang diễn ra. Tôi đã thiết lập mức thu phóng IE là 100%, nhưng IE cũng có tùy chọn "Kích thước văn bản", vì một lý do nào đó, được đặt thành "Lớn nhất". Đặt nó thành "Medium" đã khắc phục được sự cố.

+2

Đó là kích thước phông chữ mặc định của trình duyệt. – SLaks

+0

Tôi khá chắc chắn điều này đang xảy ra vì các công cụ dựng hình html tương ứng đang hiển thị phông chữ theo những cách hơi khác biệt, tôi không chắc chắn những gì có thể được thực hiện về điều đó. – usumoio

+2

Oh bugger, tôi đã thu phóng IE được đặt thành 100%, nhưng rõ ràng, IE cũng có tùy chọn "Kích thước văn bản" được đặt thành "Lớn nhất". Khi được đặt thành "Trung bình", nó sẽ hiển thị như dự định. Vâng, điều đó vô cùng đáng ghét và lúng túng. – SpencerDub

Trả lời

13

Tôi đã "giải quyết" vấn đề của riêng mình, vì tôi là kẻ ngốc.

IE10 có hai cài đặt, cả dưới menu "Chế độ xem", thay đổi kích thước của những gì được hiển thị. Tôi đã đảm bảo rằng cài đặt "Thu phóng" được đặt thành 100% nhưng hoàn toàn bị bỏ qua cài đặt "Kích thước văn bản", được đặt thành "Lớn nhất". Đặt nó thành "Trung bình" đã khắc phục được sự cố của tôi và khiến cho cả IE và Chrome hiển thị giống nhau.

+2

Để err là con người, và không đặc biệt là đánh lừa. Bạn có thể chấp nhận câu trả lời của bạn, mà có vẻ là câu trả lời đúng, mặc dù câu hỏi có chút bối rối. Vấn đề thực sự không liên quan gì đến cài đặt kích thước phông chữ trong mã của bạn. –

2

Kích thước của ảnh theo pixel có liên quan đến loại phông chữ & kích thước bạn đang sử dụng, độ phân giải màn hình (tùy thuộc vào hệ điều hành, trình duyệt) và các cài đặt khác của hệ điều hành và trình duyệt - ví dụ: "Hiển thị phông chữ +10 % "có thể thay đổi giá trị em.

Theo Rudu trong số post này.

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