IE 8 & 9 bỏ qua chiều rộng div - cách lấy ví dụ này để hoạt động?

Các trang html sau dường như làm tốt trong bất kỳ trình duyệt nhưng IE 8 & 9:IE 8 & 9 bỏ qua chiều rộng div - cách lấy ví dụ này để hoạt động?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html> 
<head> 
</head> 
<body> 
    <div style="width: 300px"> 

     <span style="white-space: nowrap;"> 
      <input type="radio" value="1" name="test" />Choice 1 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="2" name="test" />Choice 2 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="3" name="test" />Choice 3 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="4" name="test" />Choice 4 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="5" name="test" />Choice 5 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="6" name="test" />Choice 6 
     </span> 
     <span style="white-space: nowrap;"> 
      <input type="radio" value="7" name="test" />Choice 7 
     </span> 

    </div> 
</body> 
</html>

Các html dường như khá thẳng về phía trước, nhưng IE 8 & 9 bỏ qua chiều rộng trên div và buộc tất cả các lựa chọn trên cùng một dòng (IE 7 và tất cả các trình duyệt khác không phải là IE bọc ở 300px như họ cần). Bằng cách nào đó tôi cần danh sách nút radio này để bọc ở một chiều rộng được chỉ định trong khi không tách radio khỏi lựa chọn tương ứng.

Tôi có thể nhận được IE 8 & 9 để xử lý nếu tôi thay đổi loại tài liệu, tuy nhiên tôi muốn tránh thay đổi điều đó nếu có thể.

Tôi nhận được hành vi tương tự nếu tôi sử dụng thẻ "nobr" cũ ở vị trí của thẻ span.

Nguồn

2012-06-07 Troy

không thêm một 'display: inline-block; 'phong cách để bạn div giúp đỡ? –

bạn luôn có thể thêm float: left, clear: both; cho các nhịp ngang – Rooster

bạn nên đặt ";" trong <div style="width: 300px;"> (thực hành tốt)

sử dụng display: inline-block; thay vì white-space: nowrap;

Nguồn

2012-06-07 17:16:00

Cuối cùng ';' trong khai báo kiểu và trong khối CSS là tùy chọn. – Knyri

Cảm ơn bạn đã phản hồi nhanh. "display: inline-block" đã thực hiện thủ thuật. Dấu chấm phẩy không nên được yêu cầu ở cuối của một phong cách nội tuyến, tuy nhiên, nhưng nó có lẽ sạch hơn để làm như vậy anyway. – Troy

@Mayankswami Bạn nên cập nhật câu lệnh đầu tiên của mình. Không đúng là IE 8 và 9 bỏ qua việc khai báo kiểu nội tuyến trong sự vắng mặt của dấu chấm phẩy đóng. – Sampson

Vấn đề là với các tab và dòng mới mà bạn có trong đánh dấu của mình. Bạn đang yêu cầu IE không bao bọc những thứ này, nhưng đồng thời yêu cầu mỗi phần tử vẫn đủ hẹp để ngồi cạnh nhau trong vùng chứa chính.

Bạn sẽ lưu ý rằng nếu bạn loại bỏ các màu trắng-không gian, tất cả các trình duyệt hiển thị đánh dấu giống nhau:

<!DOCTYPE html> 
<html> 
    <head> 
    <style> 
     div { 
     width: 300px; 
     border: 1px solid #333 
     } 
     span { 
     border: 1px solid red; 
     white-space: nowrap 
     } 
    </style> 
    </head> 
    <body> 
    <div> 
     <span><input type="radio" value="1" name="test" /> Choice 1</span> 
     <span><input type="radio" value="2" name="test" /> Choice 2</span> 
     <span><input type="radio" value="3" name="test" /> Choice 3</span> 
     <span><input type="radio" value="4" name="test" /> Choice 4</span> 
     <span><input type="radio" value="5" name="test" /> Choice 5</span> 
     <span><input type="radio" value="6" name="test" /> Choice 6</span> 
     <span><input type="radio" value="7" name="test" /> Choice 7</span> 
    </div> 
    </body> 
</html>

enter image description here

Nguồn

2012-06-07 17:59:08 Sampson

Cảm ơn bạn đã trả lời. Tuy nhiên, câu hỏi không phải là làm thế nào để có được IE để render nó một cách chính xác, câu hỏi là làm thế nào để có được IE để render nó một cách chính xác ** với doctype trong bài gốc **, mà ví dụ của bạn không có. "display: inline-block", được Mayank đề xuất, hoạt động với cả loại tài liệu của bạn và loại tài liệu gốc. – Troy

@TroyEvans: Khi tôi kiểm tra Jonathan đã đăng Html, hãy sử dụng DocType của bạn ' ' nó vẫn hoạt động trong IE. Xem tại đây cho DEMO: http://jsfiddle.net/FranWahl/eHwm5/3/ – Nope

@TroyEvans Thay đổi loại tài liệu; nó vẫn hoạt động trong IE. Hướng dẫn của bạn cho IE không phù hợp - loại tài liệu không liên quan ở đây. – Sampson

IE 8 & 9 bỏ qua chiều rộng div - cách lấy ví dụ này để hoạt động?

Trả lời

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