Tại sao div/img này không tập trung vào IE8?

Tôi có một trang giữ rất đơn giản mà tôi đã xây dựng định tâm một div, neo và hình ảnh. Đối với một số lý do nó sẽ không trung tâm trong IE8 (hoặc chế độ), và tôi hy vọng ai đó có thể cho tôi biết lý do tại sao. Tôi đã không có cơ hội để thử nó trong các trình duyệt IE khác. Tôi đã thử điều này trong Chrome và FF3, nơi nó hoạt động OK.Tại sao div/img này không tập trung vào IE8?

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #pageContainer {width:300px;margin:0 auto;text-align:center;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Tôi đã nói nó rất đơn giản. :)

Cảm ơn bạn,

Brett

Nguồn

2009-05-03 Brettski

anyway nó không có gì để làm với phiên bản trình duyệt IE. Nó hoạt động tương tự trong tất cả các IE-s – DaDa

của nó tốt hơn để sử dụng doctype, một nửa số lỗi sẽ được cố định – Mike

Bạn có thực sự muốn trang của mình hoạt động ở chế độ quirks không?HTML của bạn tập trung tốt khi tôi thêm DOCTYPE để buộc các tiêu chuẩn chế độ:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 

<head> 
<title>Welcome</title> 
<style>  
    #pageContainer {width:300px;margin:0 auto;text-align:center;}  
    #toLogo{border:none; } 
</style> 
</head> 

<body> 

<div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"> 
    <img src="http://stackoverflow.com/content/img/so/logo.png" id="toLogo"></a> </div> 

</body> 
</html>

Nguồn

2009-05-03 05:16:09

buit-oxa, một câu trả lời rất thú vị thực sự. Cảm ơn bạn. – Brettski

Doctype> chế độ quirks, bất kỳ ngày nào. Chế độ Quirks có thể khác với trình duyệt cho trình duyệt, trong khi chế độ tiêu chuẩn khá giống nhau (yep, IE8 tuân thủ các tiêu chuẩn!) Ngoại trừ một số khác biệt nhỏ. +1 –

Thành thật mà không bao giờ nghe nói về chế độ quirks trước, cảm ơn bạn nhiều cho câu trả lời và để dạy cho tôi nhiều hơn một chút về nghề của tôi. – Brettski

Thêm text-align:center cho cơ thể. Điều đó sẽ thực hiện khi kết hợp với số margin:0 auto trên div.

Bạn có thể căn giữa mà không cần sử dụng text-align:center trên cơ thể bằng cách gói toàn bộ nội dung trang trong một hộp chứa có chiều rộng đầy đủ & rồi đặt text-align:center trên đó.

<html> 
<head> 
<title>Welcome</title> 
<style> 
    #container {text-align:center;border:1px solid blue} 
    #pageContainer {width:300px; margin:0 auto; border:1px solid red} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="container"> 
     <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
     </div> 
    </div> 
</body> 
</html>

(Tôi đã thêm container div). Nó không thực sự thay đổi bất cứ điều gì mặc dù ... chỉ là một div thêm. Bạn vẫn cần tất cả các thuộc tính css giống nhau.

Nguồn

2009-05-03 04:52:33 Bryan

Điều đó đã làm trung tâm nó trong IE8, nhưng tôi không hiểu tại sao tôi cần nó. Tôi có các trang web khác sử dụng margin: 0 auto; để căn giữa div chứa. – Brettski

Chủ đề cũ, nhưng tôi sẽ trả lời câu trả lời này (và cũng là câu trả lời phổ biến nhất) đơn giản vì câu trả lời này đặc biệt nhắc tôi đặt văn bản căn chỉnh: giữa phần thân. ;-) –

Bạn có thể muốn thay đổi nó như sau:

<html> 
<head> 
<title>Welcome</title> 
<style> 
    body { text-align: center; } 
    #pageContainer {width:300px;margin:0 auto;} 
    #toLogo{border:none; } 
</style> 
</head> 
<body> 
    <div id="pageContainer"> 
    <a href="http://portal.thesit.com" id="toSite"><img src="LOGO_DNNsmall.png" id="toLogo"></a> 
    </div> 
</body> 
</html>

Các text-align:center; được chuyển đến cơ thể. Nếu bạn muốn đặt nội dung bên trái được căn chỉnh khác trong div #pageContainer, thì bạn sẽ cần text-align:left; cho lớp đó. Đây là giải pháp mà tôi đã sử dụng trong một vài trang web hiện nay và dường như hoạt động trên tất cả các trình duyệt (đó là những gì Dreamweaver sử dụng trong các mẫu khởi động của nó).

Nguồn

2009-05-03 04:56:50

christ biết tại sao ai đó bình chọn bạn xuống vì đây chính là cách bạn căn giữa trang – wheresrhys

Vì IE8 thực sự là tiêu chuẩn tuân thủ ở cấp độ này, bạn thực sự có thể áp dụng tiêu chuẩn và sepcification. Thuộc tính căn chỉnh văn bản chỉ tập trung vào các phần tử mức nội tuyến và không chặn các eleements cấp độ, như DIV. text-align: center; trong trường hợp này sẽ chỉ căn giữa * văn bản * trong nội dung chứ không phải các phần tử vùng chứa. Điều duy nhất anh ta cần là một doctype, như các câu trả lời ở trên nói. –

Lề của auto ở hai bên của div để cho trình duyệt quyết định vị trí của nó. Không có gì nói với trình duyệt rằng div nên được căn giữa trong cơ thể, hoặc căn trái hoặc phải. Vì vậy, nó lên đến trình duyệt. Nếu bạn thêm một chỉ thị cho cơ thể, vấn đề của bạn sẽ được giải quyết.

<html> 
    <head> 
    <title>Welcome</title> 
    <style> 
     body { text-align: center;} 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Tôi đã thêm đường viền 1px vào div để bạn có thể thấy điều gì đang diễn ra rõ ràng hơn.

Bạn đang để nó lên trình duyệt vì nó ở chế độ quirks. Để xóa chế độ quirks, hãy thêm định nghĩa loại tài liệu lên trên cùng, như vậy:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> 
    <head> 
    <title>Welcome</title> 
    <style> 
     #pageContainer {width:300px; margin:0px auto; 
      text-align:center; border:thin 1px solid;} 
     #toLogo{border:none; } 
    </style> 
    </head> 
    <body> 
    <div id="pageContainer"> 
     <a href="http://portal.thesit.com" id="toSite"> 
     <img src="LOGO_DNNsmall.png" id="toLogo"> 
     </a> 
    </div> 
    </body> 
</html>

Bây giờ bạn sẽ có thể thấy trung tâm div 300 px trên trang.

Nguồn

2009-05-03 05:02:24

Lề ngang tự động kết hợp với chiều rộng được đặt là cách thích hợp để căn giữa các phần tử cấp khối. Thực hành phổ biến, hãy thử nó cho mình :) –

Đối với người dùng Blueprint này lái xe các loại hạt của tôi, cho đến khi tôi tìm thấy bài đăng này: problem with ie8 and blueprint Long truyện ngắn, trong bạn thay đổi mã html các

<!--[if IE]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

cho

<!--[if lt IE 8]> 
<link rel="stylesheet" href="../css/blueprint/ie.css" type="text/css" media="screen, projection" /> 
<![endif]-->

Trân Alex

Nguồn

2009-09-11 23:24:26

-1

này làm việc cho tôi trên IE6,7,8, FF 3.6.3:

#container 
    { 
     width:100%; 
    } 

    #centered 
    { 
     width:350px; 
     margin:0 auto; 
    }

và

<div id="container"> 
     <div id="centered">content</div> 
    </div>

Nguồn

2010-04-06 16:16:19 ben

Không hoạt động ... – Philippe

Tại sao div/img này không tập trung vào IE8?

Trả lời

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