br line-height trong safari và chrome để lại khoảng cách

Question

Trong HTML của tôi, tôi có một div và bên trong div tôi có khoảng cách dọc khác nhau giữa các dòng văn bản. Tôi đạt được điều này bằng cách sử dụng các ngắt và xác định chiều cao, tức là <br /><br class="height5" /> hoặc height2 hoặc height10 hoặc bất kỳ thứ gì.

Trong stylesheet của tôi, tôi định nghĩa nó thích:

br.height2 {line-height: 2px;} br.height5 {line-height: 5px;}

này đang làm việc trong IE6 + FF2 + và Opera nhưng đối với một số lý do có những khoảng trống rất lớn trong Safari và Chrome (như hai trình duyệt đang bỏ qua nó và chỉ áp dụng các ngắt thường xuyên). Tôi đã thử nghiệm với chiều cao dòng lớn hơn như 20px hoặc 30px và Safari và Chrome nhận ra những điều đó. Họ dường như bỏ qua bất cứ điều gì dưới 5-10 pixel.

Trợ giúp? Cảm ơn!

Answer 1

Các trình duyệt đó có thể đang đọc khoảng trắng của bạn (chuyển về phương tiện vận chuyển, v.v.) và mở nó bằng một loại giá trị & nbsp; Tôi khuyên bạn nên sử dụng nhiều thẻ div và tạo kiểu cho các div có thuộc tính margin-bottom của không gian bạn muốn.

<div style="margin-bottom: 2px">content</div> 
<div style="margin-bottom: 5px">content</div> 
<div>content</div> 

Answer 2

này làm việc trên Chrome (thuộc tính content đã làm các trick):

br { 
    content: " "; 
    display: block; 
    margin: 1em; 
} 

Answer 3

Tôi biết điều này là cũ, nhưng câu trả lời của tôi ở đây là qua trình duyệt mà không cần chuyển BR thành một khối

/* line height can be set to whatever you want*/ 
br {line-height: 0.1; content: " "} 

Answer 4

Hãy thử điều này:

br { line-height: 1em; } 

hoặc:

br { margin-top: 2em; } 

Answer 5

Điều này làm việc cho tôi cho cả firefox và chrome. Có ý tưởng từ @SamuelC và @anushr.

br{ 
    display: block; 
    line-height: 0.1; 
    content: " "; 
}