SPAN Chiều cao trong Firefox

Question

Sử dụng CSS, tôi đang cố gắng chỉ định chiều cao của thẻ SPAN trong Firefox, nhưng nó chỉ không chấp nhận nó (IE, vui vẻ đủ).

Firefox chấp nhận chiều cao nếu tôi sử dụng DIV, nhưng vấn đề với việc sử dụng DIV là ngắt dòng gây phiền nhiễu sau nó, mà tôi không thể có trong trường hợp cụ thể này.

Tôi đã thử đặt thuộc tính kiểu CSS là:

display: inline

cho DIV, nhưng Firefox dường như sau đó hoàn nguyên về hành vi SPAN và bỏ qua thuộc tính chiều cao một lần nữa.

Answer 1

<style> 
#div1 { float:left; height:20px; width:20px; } 
#div2 { float:left; height:30px; width:30px } 
</style> 

<div id="div1">FirstDiv</div> 
<div id="div2">SecondDiv</div> 

Chừng nào các container cho bất cứ điều gì đang nắm giữ div 1 và 2 đủ rộng để phù hợp, điều này sẽ ổn thôi.

Answer 2

Vì bạn đang hiển thị nội tuyến, nên đặt chiều cao ở độ cao thuộc tính chiều cao dòng của bạn.

Tùy thuộc vào cách nó được đặt ra, bạn luôn có thể sử dụng phao: trái hoặc nổi: ngay trên span/div để ngăn chặn ngắt dòng. Nhưng nếu bạn muốn nó ở giữa một câu, tùy chọn đó là ra ngoài.

Answer 3

Phần tử nội tuyến không được có chiều cao (cũng như chiều rộng) như vậy. SPAN đã được display: inline theo mặc định. Internet Explorer thực sự là trình duyệt bị hỏng trong trường hợp này.

Answer 4

Bạn chỉ có thể thay đổi chiều cao (và chiều rộng) của phần tử span khi được đặt thành display: block;. Điều này là bởi vì nó là một yếu tố nội tuyến bình thường. div được đặt thành display: block; bình thường.

Một giải pháp có thể được sử dụng:

<div style="background: #f00;"> 
    Text <span style="padding: 14px 0 14px 0; background: #ff0;">wooo</span> text. 
</div> 

Answer 5

Vấn đề là 'display: inline' không thể có được một chiều cao liên quan bởi vì, là nội tuyến, nó được chiều cao của nó từ nội dung của nó. Dù sao, làm thế nào để bạn xác định chiều cao của một hộp bị hỏng ở cuối của một dòng?

Bạn có thể cố gắng thiết lập 'line-height' thay vào đó, hoặc nếu điều này không làm việc để sự hài lòng của mình, đặt padding:

/* makes the whole box higher by inserting a space between the border and the content */ 
padding: 0.5em 0; 

Answer 6

Bạn có thể đặt bất kỳ thành phần nào thành display: inline-block để cho phép nó nhận được chiều cao hoặc chiều rộng. Điều này cũng cho phép bạn áp dụng bất kỳ "kiểu khối" nào khác cho một phần tử.

Một điều cần lưu ý là Firefox 2 không hỗ trợ thuộc tính này. Firefox 3 là trình duyệt dựa trên Mozilla đầu tiên hỗ trợ thuộc tính này. Tất cả các trình duyệt khác đều hỗ trợ thuộc tính này, bao gồm cả Internet Explorer.

Hãy nhớ rằng inline-block không cho phép bạn đặt căn chỉnh văn bản bên trong phần tử trên Firefox nếu đang chạy ở chế độ quirks. Tất cả các trình duyệt khác đều cho phép điều này theo như tôi biết. Nếu bạn muốn đặt căn chỉnh văn bản trong khi chạy ở chế độ quirks, bạn sẽ phải sử dụng thuộc tính -moz-inline-stack thay vì inline-block. Hãy ghi nhớ đây là thuộc tính chỉ dành cho Mozilla, do đó bạn sẽ phải thực hiện một số phát hiện trình duyệt để đảm bảo chỉ Mozilla nhận được điều này, trong khi các trình duyệt khác nhận được tiêu chuẩn inline-block.

Answer 7

height trong em = relative line-height

ví dụ height:1.1em với line-height:1.1

= 100% điền

Answer 8

liên kết văn bản bên trong các yếu tố bạn có thể điều chỉnh bằng cách sử dụng đệm và khối inline thuộc tính. display: inline-block; padding-top: 3px; ví dụ

Answer 9

Để thiết lập chiều cao của tuổi sau đây nên làm việc trong firefox

span { 
    display: block; 
    height: 50px; 
}