(Xin lỗi cho danh hiệu, nhưng đó là về làm thế nào tôi cảm thấy ngay bây giờ.)Dude, cột của tôi ở đâu?
Tôi vừa mới được trao ... cơ hội ... hoàn toàn thiết kế lại cách bố trí của một trang web Tôi ủng hộ. Để giữ CSS của tôi đơn giản và ngữ nghĩa HTML của tôi, tôi quyết định sử dụng phiên bản sửa đổi của the "holy grail" layout (sự khác biệt chính là di chuyển cột bên phải bên trong cột giữa, điều này giúp đơn giản hóa mọi thứ hơn nữa và làm cho cột trung tâm cố định chiều rộng).
Sau một số lượng không đáng kể không quan trọng, tôi đã có bố cục mới hoạt động trong FF3, Chrome và Opera, có nghĩa là đã đến lúc kích hoạt IE6. Có thể đoán trước, bố trí ngắt (cột bên trái bị thiếu hoàn toàn). Tuy nhiên, tôi đã không mong đợi nó để phá vỡ khá ngoạn mục - Tôi dường như đã kích hoạt một số loại lỗi rendering trong IE6 mà tôi không thể cô lập cũng không loại bỏ.
Khi điều chỉnh bố cục chén thánh, ban đầu tôi đã bỏ qua hack IE6 cụ thể mà nó sử dụng, không cần thiết phải sửa đổi với cột sửa đổi tài khoản cho chiều rộng của cột đó, không xuất hiện ở cùng cấp trong bố cục của tôi. Tuy nhiên, thêm nó trở lại là phỏng đoán đầu tiên của tôi, nhưng hóa ra lại yêu cầu một số rất lạ (246px, không xuất hiện ở bất kỳ đâu trong bản định kiểu), vì vậy tôi đã thử thay đổi kích thước cửa sổ để đảm bảo nó không liên quan đến kích thước trang. Thật ngạc nhiên, cột sau đó nhảy ~ 1000 pixel sang bên phải, vượt ra ngoài mép của trang.
Quay lại và xóa bản hack IE6, hành vi tương tự xảy ra khi thay đổi kích thước, thay vì nhảy từ phía bên trái của bố cục ra khỏi trang, nó xuất hiện ở đâu đó ở bên phải bên phải của bố cục. Tôi đã khỉ với tất cả các phần của bố trí mà dường như thậm chí từ xa liên quan và Googled lên tất cả các lỗi dựng hình IE6 tôi biết, nhưng dường như không thể loại bỏ các hành vi nhảy-on-page-resize.
Có ai nhìn thấy lỗi này trước đây không, nếu lỗi là gì? Hoàn thành code sau:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Modified grail layout</title>
<style type="text/css">
* {
border: 0;
margin: 0;
padding: 0;
}
#main {
background: white;
overflow: auto;
padding-left: 180px;
}
#content {
background: #dfd;
float: left;
padding: 10px 10px 0;
width: 800px;
}
#left {
background: #ccc;
float: left;
margin-left: -100%;
position: relative;
padding: 10px 10px 0;
right: 180px;
width: 160px;
}
#right {
background: #fdd;
float: right;
margin-bottom: 10px;
padding: 10px 10px 0;
width: 160px;
}
#top {
margin: 0 auto;
width: 1000px;
}
body {
background: #ddf;
}
/* fake content */
#cc1 {
height: 320px;
width: 800px;
}
#cc2 {
height: 320px;
margin-right: 190px;
}
#cc3 {
height: 160px;
margin-right: 190px;
}
#lc1 {
height: 120px;
margin-left: auto;
margin-right: auto;
width: 144px;
}
#lc2 {
height: 300px;
width: 160px;
}
#lc3 {
height: 400px;
width: 160px;
}
#rc1 {
height: 400px;
width: 160px;
}
#rc2 {
height: 300px;
width: 160px;
}
div.fake-content {
background: #666;
color: white;
margin-bottom: 10px;
}
/* Internet Explorer (all) */
#ie body {
text-align: center;
}
#ie #left {
text-align: center;
}
#ie #left * {
text-align: left;
}
#ie #right {
margin-bottom: 0;
}
#ie #top {
text-align: left;
}
/* Internet Explorer 6 */
#ie6 #left {
left: 246px; /* WTF!? */
}
</style>
</head>
<body>
<!--[if IE 6]><div id="ie"><div id="ie6"><![endif]-->
<!--[if IE 7]><div id="ie"><div id="ie7"><![endif]-->
<!--[if IE 8]><div id="ie"><div id="ie8"><![endif]-->
<div id="top">
<div id="main">
<div id="content">
<div id="cc1" class="fake-content">cc1</div>
<div id="right">
<div id="rc1" class="fake-content">rc1</div>
<div id="rc2" class="fake-content">rc2</div>
</div>
<div id="cc2" class="fake-content">cc2</div>
<div id="cc3" class="fake-content">cc3</div>
</div>
<div id="left">
<div id="lc1" class="fake-content">lc1</div>
<div id="lc2" class="fake-content">lc2</div>
<div id="lc3" class="fake-content">lc3</div>
</div>
</div>
<p id="footer">©2009 Blah blah blah</p>
</div>
<!--[if IE]></div></div><![endif]-->
</body>
</html>
Tôi không chắc chắn lý do tại sao bạn đang sử dụng công cụ chọn "#ie body" thay vì "#ie #body". Tôi có thể sử dụng một id không giống như một phần tử HTML để tránh nhầm lẫn bản thân mình. – snippid
Er… Tôi thực sự muốn thay đổi điều đó (đã vấp phải nó một lần). Lemme làm điều đó ngay bây giờ ... –