{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 虎瘦雄心在 的问题《How to emulate min-width in IE8》','https://www.manongdao.com/q-770178.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
The IE8 documentation says it supports min-width, but it doesn't seem to work for me.
The html I want to be a minimum width is in table cells.
I saw another question here which suggested adding a 1-pixel height div to each cell, with a width setting, but that doesn't work - IE renders it as 18 pixels high, for some reason.
Here is the html code:
<html>
<head>
<script src="jquery.js" type="text/javascript"></script>
<style type="text/css">
table.keyboard div.key {
height: 50px;
font-size:50px;
border: 5px outset gray;
min-width: 60px;
text-align: center;
}
table.keyboard div.spc {
height: 1px;
width: 60px;
background-color: green;
}
table.keyboard td:hover {
background-color: lightblue;
}
table.keyboard {
border: 3px inset blue;
}
</style>
</head>
<body>
<div id="body">
<div>Here is some stuff</div>
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div><div class='spc'></div></td>
<td><div class='key'>2</div><div class='spc'></div></td>
<td><div class='key'>3</div><div class='spc'></div></td>
<td><div class='key'>4</div><div class='spc'></div></td>
<td><div class='key'>5</div><div class='spc'></div></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
The "spc" div appears 18 px high!
Of course, if min-width worked, I wouldn't need the div...
<table class='keyboard'>
<tbody>
<tr>
<td><div class='key'>1</div></td>
<td><div class='key'>2</div></td>
<td><div class='key'>3</div></td>
<td><div class='key'>4</div></td>
<td><div class='key'>5</div></td>
</tr>
</tbody>
</table>
Any clues?
Just to make this easier, I have put 3 different versions of this code on my website.
Try this:
This width expressions is an alternative for min-width, it supposed to be a workaround for older versions of IE.
I think your problem is that your column is determining the width of the element, not the div.
EDIT:
Also check if your browser is not in Compatibility mode.
http://jsfiddle.net/3htmA/
IE8. your code works perfect.
The HTML TABLE spec uses COL to define column widths. See the following spec: http://www.w3.org/TR/html4/struct/tables.html#h-11.2.4
Here's an example of how it's used: http://www.htmldog.com/guides/htmladvanced/tables/
Min-width on table cells works differently than block-level elements. Table cells are controlled on the column level, not on the individual cell level. If a given cell size increases or decreases, the entire column will be affected, unless explicitly controlled by the tag.