tại sao trình duyệt hiện đại vẫn đặt dấu cách giữa các khối inline nếu có khoảng trắng

Nếu bạn có đánh dấu như thế này:tại sao trình duyệt hiện đại vẫn đặt dấu cách giữa các khối inline nếu có khoảng trắng

<div class="inlineblock">one</div> 
<div class="inlineblock">two</div> 
<div class="inlineblock">three</div>

và css như thế này: .inlineblock {display: inline-block; }

Bạn sẽ nhận được dấu cách giữa các phần tử. khoảng 4px không gian. trừ khi đánh dấu của bạn trông giống như sau:

<div class="inlineblock">one</div><div class="inlineblock">two</div><div class="inlineblock">three</div>

Bây giờ, điều tôi muốn biết là TẠI SAO?

Lý do kỹ thuật khiến trình duyệt "tốt" vẫn làm điều này, ngay cả Firefox, Chrome và Opera mới nhất tại thời điểm bài đăng này vẫn làm điều này. Tôi cho rằng có một lý do kỹ thuật đằng sau nó, nếu không nó sẽ được cố định bởi bây giờ?

Cảm ơn!

Nguồn

2013-05-22 deweydb

Tại sao không? Các phần tử khối nội tuyến được lập trình để xuất hiện nội tuyến bằng văn bản. Nếu có văn bản giữa, nó sẽ được trả lại. – zneak

Bạn đã không nhận thấy lỗi (thực sự nó không phải là một thất bại) trong duyệt cũ, tại sao hầu hết trong số họ không thể đứng "inline-block" hoàn toàn. Đây không phải là một thất bại, tôi khuyên bạn nên sử dụng CSS-reset. Đọc câu trả lời của tôi: http://stackoverflow.com/questions/16698142/why-do-modern-browsers-still-put-spaces-between-inline-block-if-there-is-whitesp/16698173#16698173 –

@Guilherme Nascimento Không biết tại sao bạn đang thực hiện cuộc thảo luận này về các trình duyệt cũ và những thiếu sót của chúng. Điều đó chẳng liên quan gì đến câu hỏi. – deweydb

Đây chính xác là những gì họ nên làm.

Dấu cách giữa các phần tử nội tuyến không khác với khoảng cách giữa các từ.

Nếu bạn không muốn điều đó, hãy sử dụng các phần tử khối hoặc đặt kích thước phông chữ thành 0.

Nguồn

2013-05-22 17:33:28 SLaks

Chính xác, giống như khi bạn làm ' a b' bạn mong đợi 'ab' và không' ab' và khi bạn viết "Hello World" bạn mong đợi "Hello World" chứ không phải "HelloWorld" –

Cảm ơn, tôi đã không Không nghĩ về nó như thế, tôi chủ yếu nghĩ về cách tôi ghét cái nhìn của đánh dấu của tôi, nhưng tôi đoán kích thước phông chữ hack sẽ đủ. Chúc mừng. – deweydb

Vâng, có khoảng cách giữa chúng!

Để khắc phục, hãy thử sử dụng font-size: 0 trong phần tử gốc.

Nguồn

2013-05-22 17:34:41 gustavohenke

Có cách tốt hơn để loại bỏ khoảng trắng hơn là đặt kích thước phông chữ thành 0 (vì phương pháp đó có tác dụng phụ khó chịu). Thay vào đó, bạn có thể thay thế từ:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<style> 

section { 
    word-spacing:-.25em; /* hide whitespace nodes in all modern browsers (not for webkit)*/ 
    display:table;/* Webkit Fix */ 
} 

div { 
    width: 100px; 
    height: 40px; 
    background: #e7e7e7; 
    padding: 10px; 
    display:inline-block; 
    word-spacing:0; /* reset from parent*/ 
} 

</style> 
</head> 
<body> 
<section> 
    <div>one</div> 
    <div>two</div> 
    <div>three</div> 
</section>   
</body> 
</html>

Nguồn

2013-08-26 12:53:14

Đây là giải pháp.

<style> 
    * { 
    border:0; 
    margin:0; 
    padding:0; 
    box-shadow:0 0 1px 0px silver; 
    } 
    .foo { 
    width: 100%; 
    } 
    .bar { 
    width: 50%; 
    float:left; 
    text-align: center; 
    } 
    </style> 
    <div class="foo"> 
     <div class="bar"> 
      ...a new customer 
     <!-- the whitespace between the following divs affects rendering - why? --> 
     </div> <div class="bar"> 
      ...an existing customer 
     </div> 
    </div>

Nguồn

2013-08-26 13:51:45

tại sao trình duyệt hiện đại vẫn đặt dấu cách giữa các khối inline nếu có khoảng trắng

Trả lời

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