IE7 đang cắt bớt văn bản của tôi. Làm thế nào để điều chỉnh thái độ của nó?

Question

Một vài ngày trước, tôi đã làm lại trang web của mình. Sự phát triển của làn da này chủ yếu được thực hiện bằng cách sử dụng safari, và như mong đợi, tất cả đều hoàn hảo khi sử dụng firefox và opera. Tôi đã phải thực hiện một vài chỉnh sửa nhỏ cho IE7, nhưng không có gì nhiều, ngoại trừ một vấn đề ...

Chỉ báo ngày cho bài đăng bị cắt trong IE. Vấn đề này dường như chỉ xảy ra trên các thẻ span lồng nhau bên trong một div nổi bên trái. Tôi nghĩ rằng tôi cần div nổi để bố trí văn bản ở bên trái và bên phải của màn hình.

Có ai trong số các bạn biết cách ngăn IE7 cắt văn bản của tôi không?

Chỉnh sửa: Tôi đã loại bỏ về vấn đề này. Các kịch bản của tôi bây giờ kiểm tra IE7 và cung cấp cho nó phần nào HTML đơn giản mà công cụ hạn chế của nó có thể xử lý. Nó hoạt động trong IE8, vì vậy, bây giờ, chỉ cần trường hợp đặc biệt cho IE7 sẽ phải làm ...

Answer 1

cho lớp .bigdate, thử thay thế lề bằng đệm; dường như với tôi rằng điều này có liên quan đến việc xử lý margin của IE.

Answer 2

Thử thêm tràn: hiển thị; vào lớp .postdate của bạn. Có lẽ điều đó sẽ giúp ích.

Answer 3

Thêm một chiều cao cụ thể để .title sửa chữa nó cho tôi (trong IE6):

.title { 
    PADDING: 0 10px 0 0; MARGIN-top: 0.3em; FLOAT: right; height: 1em; 

Answer 4

Mặc dù là không thể kiểm tra nó trên máy tính hiện tại của tôi: Tôi nghi ngờ rằng đó là một hasLayout bug. Các phương thức xử lý nó được liệt kê trong phần "properties" của liên kết đó.

Answer 5

Trong hầu hết các trường hợp IE6 hoặc 7 clip ra khỏi đáy của văn bản, chỉ cần thêm:

line-height: normal; 

các quy tắc CSS liên quan. Nên sửa chữa nó độc đáo, nhưng như bạn sẽ hiểu, nó mở rộng hộp quá.

Answer 6

Theo kinh nghiệm của tôi, nó luôn ở cuối văn bản bị cắt bớt và về cơ bản là do các phần chồng chéo. Nếu bạn có thể đảm bảo rằng các div không trùng lặp thì vấn đề sẽ được giải quyết. Điều đó ngoài việc thêm tràn: hiển thị không giúp đôi khi.

Answer 7

Hãy thử thêm

div.postmeta { height: 100px; } 
div.postdate { height: 75px; } 

giá trị chiều cao Arbitrary ... nhưng bạn muốn biết chiều cao chính xác mà bạn muốn. Điều đó sẽ giữ cho các thùng chứa văn bản không bị cắt trong IE7.

Answer 8

Có một hack tôi đã tìm ra rằng khắc phục sự cố cắt văn bản trong IE. Tôi nhận thấy dòng cuối cùng trong dòng tiêu đề của tôi là người duy nhất bị cắt.

CSS ban đầu của tôi đó là cắt đứt dòng cuối cùng trong IE7 nhưng nhìn tốt trong các trình duyệt khác:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
} 

Xem hình ảnh của vấn đề ở đây: https://skitch.com/pablohart/f4g3i/windows-7-x64

Việc sửa chữa tôi đã bao gồm đơn giản là thêm padding đáy và sau đó lấy padding đó với lề âm.Như thế này:

h2 { 
    font-size: 22px; 
    line-height: 1em; 
    padding-bottom: 5px; 
    margin-bottom: -5px; 
} 

Xem hình ảnh của sửa chữa trong hình ảnh này: https://skitch.com/pablohart/f4g4h/windows-7-x64

Vấn đề với line-height: bình thường; là phải mất chiều cao dòng mặc định cho phông chữ, thường là 1,3em.

Answer 9

Tôi gặp sự cố tương tự. Tôi đã thay đổi khoảng cách của mình thành div và vấn đề đã được giải quyết. Tôi nghĩ rằng IE7 có thể có một vấn đề xử lý dòng chiều cao trên một khoảng. Chưa xác nhận rằng đó là vấn đề. Có các phần tử CSS khác. (Làm việc trên mã của người khác.) Nhưng thay đổi từ span thành div (block) đã giải quyết được vấn đề.

Answer 10

Tôi nghĩ vấn đề là với phần đệm. Tôi đã thử loại bỏ kiểu "đệm: 3px" và nó hoạt động bình thường. Trước đây nó không hiển thị bất cứ điều gì. Câu trả lời của Paul Hart cho tôi thấy điều đó.
Có thể việc xóa/ghi đè các thuộc tính ký quỹ cũng có thể hữu ích.