2012-11-18 13 views
5

Tôi có một trang web tương đối đơn giản về HTML và CSS và có vẻ tốt trong các trình duyệt Máy tính để bàn (IE9/Chrome). Tuy nhiên khi tôi xem nó trong Internet Explorer trong Windows Phone 7.5 có vẻ như để làm cho văn bản bên trong danh sách không có thứ tự lớn hay nhỏ đối với một số lý do,Tại sao kích thước phông chữ của tôi lại quá sai lầm khi áp dụng lề cho phần tử nội dung trong Internet Explorer trên Windows Phone 7.5?

Đây là mã mà tạo ra kết quả lạ

<!DOCTYPE html> 
<head> 
<style type="text/css"> 
body { 
    margin: 0px 0px; 
} 
h1 { 
    font-size: 250%; 
} 
h2 { 
    font-size: 150%; 
} 
h3 { 
    font-size: 120%; 
} 
</style> 
</head> 
<body> 

    <h1>H1 header</h1> 
    <h2>H2 header</h2> 
    <h3>H3 header</h3> 
    <p>Some paragraph text</p> 
    <ul> 
    <li>List item 1</li> 
    <li>List item 2</li> 
    </ul> 

</body> 
</html> 

Hãy xem ở kích thước của văn bản li, nó phải là kích thước của thẻ p nhưng nó rất nhỏ. Đối với một phiên bản của tập tin này trên mạng thấy this link here

tôi đã thu hẹp nó xuống margin tài sản trên body và trên một div, nếu một trong hai số này được thiết lập sau đó tỷ lệ văn bản đi điên. Lý do tại sao điều này xảy ra? Đây có phải là một lỗi? Tôi có thể làm việc xung quanh điều này nhưng tôi thuận tiện hơn khi đặt lề trên một vùng chứa thay vì tất cả trẻ em riêng lẻ

Trả lời

8

Dường như Internet Explorer dành cho Windows Phone 7 áp dụng một số loại thay đổi kích thước phông chữ để tối ưu hóa nội dung, nhưng điều này cuối cùng chỉ làm hỏng trang web của tôi, xem this PDF 'Windows Explorer Mobile for Windows Phone 7 giải thích ngắn gọn.

Để ngăn chặn hành vi này, bao gồm bit này của CSS

html { 
    -ms-text-size-adjust: none; 
} 
+0

Wow, một lifesave! – cleong