Tôi có đánh dấu sau, nơi tôi đang cố gắng lấy mặt bên phải của bảng thứ hai để căn chỉnh với phía bên phải của tiêu đề bên trên nó. Điều này làm việc trong IE8, Firefox và Chrome, nhưng trong IE6/7 bảng được kéo dài không chính xác để lấp đầy chiều rộng của trang.Kéo chiều rộng chính xác đến 100% phần tử khối nội tuyến trong IE6 và IE7
Tôi đang sử dụng Trip Switch hasLayout trigger để áp dụng inline-block trong IE6/7.
Có ai biết làm thế nào (hoặc thậm chí nếu) tôi có thể lấy bảng chỉ để lấp đầy chiều rộng tự nhiên của phần tử trình bao được hiển thị với inline-block trong IE6/7?
Bạn có thể thấy mã đang chạy trực tiếp tại http://jsbin.com/uyuva.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
.wrapper {
display: inline-block;
border: 1px solid green;
}
/*
display: inline-block triggers the wrapper element to have layout for IE 6/7.
The trip switch then provides the inline component of the display behaviour.
See http://www.brunildo.org/test/InlineBlockLayout.html for more details.
*/
.wrapper {
*display: inline;
}
table {
border: 1px solid red;
}
</style>
</head>
<body>
<h1>No width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table doesn't stretch to the end of this heading</h2>
<table><tr><td>foo</td></tr></table>
</div> text
<h1>Width on table:</h1>
<div class="wrapper">
<h2>The right hand side of the table should stretch to the end of this heading</h2>
<table style="width: 100%"><tr><td>foo</td></tr></table>
</div> text
</body>
</html>
Cập nhật: đây là một ví dụ về vấn đề này, thời gian này mà không sử dụng một bảng và sử dụng một yếu tố container hoàn toàn vị trí. Bạn có thể thấy mã đang chạy trực tiếp tại http://jsbin.com/igila4.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Test</title>
<style>
div {
position: absolute;
border: 1px solid red;
}
input {
width: 100%;
*width: 95%; /* fudge factor for IE 6/7 which don't support box-sizing */
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
textarea {
width: 400px;
}
</style>
<body>
The width of the input and textarea below should be identical.<br/>
<div>
<input value="This is an input with width 100%"><br/>
<textarea>This is a text area with width 400px.</textarea>
</div>
</body>
</html>
Bạn đang cố gắng để có được bảng để phù hợp cụ thể chiều rộng của H2 trên nó hoặc chỉ cần điền vào chiều rộng của div.wrapper bất kể H2? –
Tôi đang cố gắng để có được bảng để phù hợp với chiều rộng của H2 nếu H2 là rộng hơn chiều rộng tự nhiên của bảng. Nếu H2 hẹp hơn chiều rộng bảng tự nhiên thì tôi mong đợi chiều rộng của div.wrapper sẽ kết thúc dưới dạng chiều rộng bảng tự nhiên. –