CSS - How to make IE7 respect min-width
IE7 is ignoring my min-width setting. I read that IE7 supports min-width as long as you are in Standards mode (not quirks). I specified
<!DOCTYPE html>
as my header. The markup is valid. I still can't get IE7 to respect min-width. What should I do?
Sample Code
<开发者_Go百科table class="ProcedureTable">
<thead>
<tr>
<th>column data</th>
<th>column data</th>
<th>column data</th>
<th>column data</th>
<th>column data</th>
</tr>
</thead>
<tr class="PadColumns">
<td class="ExpandName">
column data
</td>
CSS
.ExpandName
{
min-width:25em;
}
Ah Yes.. I ran into this a while ago
check out this link
http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx
Essentially ... you need to include this shim in JS to manually hack the rule
Below is the way that I handle it tho
Just call the function onload of the body
/*
author: Rob Eberhardt
desc: fix MinWidth for IE6 & IE7
params: none
returns: nothing
notes: cannot yet fix childless elements like INPUT or SELECT
history:
2006-11-20 revised for standards-mode compatibility
2006-11-17 first version
*/
function fixMinWidthForIE(){
try{
if(!document.body.currentStyle){return} //IE only
}catch(e){return}
var elems=document.getElementsByTagName("*");
for(e=0; e<elems.length; e++){
var eCurStyle = elems[e].currentStyle;
var l_minWidth = (eCurStyle.minWidth) ? eCurStyle.minWidth : eCurStyle.getAttribute("min-width"); //IE7 : IE6
if(l_minWidth && l_minWidth != 'auto'){
var shim = document.createElement("DIV");
shim.style.cssText = 'margin:0 !important; padding:0 !important; border:0 !important; line-height:0 !important; height:0 !important; BACKGROUND:RED;';
shim.style.width = l_minWidth;
shim.appendChild(document.createElement(" "));
if(elems[e].canHaveChildren){
elems[e].appendChild(shim);
}else{
//??
}
}
}
}
there is another way to do it as well
http://perishablepress.com/press/2007/01/16/maximum-and-minimum-height-and-width-in-internet-explorer/
* html div#division {
height: expression( this.scrollHeight < 334 ? "333px" : "auto" ); /* sets min-height for IE */
}
I'm a newb so apparently I can't comment on @samccone's first answer above. Just wanted to add it does work but will generate errors in IE9 the way he is creating the non breaking space element, i.e...
shim.appendChild(document.createElement(" "));
That line can be replaced with...
shim.innerHTML = " ";
and all is well. Hope this helps someone out.
The markup is valid.
No, <!DOCTYPE html> is not valid as far as that era is concerned. As far as I know that became valid only with HTML5, which IE7 is certainly not aware of (IE9 is somewhat aware, not sure about 8). On the page I am working on, min-width works just fine even on the body tag. However, we're using XHTML on this particular page:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
Furthermore, other things may take IE out of standards-mode and bring it into quirks mode, so even the right doctype might not fix it for you.
So, if you must use HTML5 and be compatible with IE7 you will have to resort to a behaviour CSS attribute, a conditional comment, and/or an IE7-specific script.
加载中,请稍侯......
精彩评论