Stretching width correctly to 100% of an inline-block element in IE6 and IE7
I have the following markup, where I am attempting to get the right hand side of the second table to align with the right hand side of the heading above it. This works in IE8, Firefox and Chrome, but in IE6/7 the table is incorrectly stretched to fill the width of the page.
I'm using the Trip Switch hasLayout trigger to apply inline-block in IE6/7.
Does anyone know how (or even if) I can get the table only to fill the natural width of the wrapper element displayed with inline-block in IE6/7?
You can see the code running live at 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</t开发者_如何学运维d></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>
Update: here's another example of the problem, this time without using a table and using an absolutely positioned container element. You can see the code running live at 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>
It doesn't appear this can be achieved only through CSS.
I deliberately avoided using script because I much prefer to take advantage of the browser reflowing everything for me when the page is dynamically manipulated instead of having to write manual code to update the width.
In the end I side-stepped the issue by specifying a minimum width for my tables which should be wider than the length of any heading I'll have.
Internet Explorer 6 and 7 don't support min-width but as I've got common script that creates the tables I'm displaying I dynamically create an extra thead element that has a single cell that spans every column which I style to effectively give me the same result:
CSS
table {
min-width: 600px;
}
th.min-width {
*width: 600px;
}
HTML table structure
<table>
<thead><tr><th colspan="3" class="min-width"></th></tr></thead>
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
If you can set a width on the wrapper (e.g. 50em), then the table will expand to the width of the wrapper.
However, if you need the wrapper to be widthed dynamically, then you could use javascript to set the width of the table to the offsetWidth of the wrapper. Here's the page with the javascript added: http://jsbin.com/uyuva/5
I've only tested it on my IE 8 with compatibility mode running, since I don't have IE 6/7.
You'll need to use javascript to get the width of the h2 and apply it to the table. I don't believe that CSS can handle what you need in every browser coughIEcough
Here is a good sample to reference
加载中,请稍侯......
精彩评论