html - CSS - How to make IE7 respect min-width

Question

Welcome To Ask or Share your Answers For Others

html - CSS - How to make IE7 respect min-width

asked Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

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

     <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;
}

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

391 views

1 Answer

深蓝 · Answer 1 · 2021-10-23T19:02:57+0000

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("&nbsp;"));
         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 */
}

Categories

html - CSS - How to make IE7 respect min-width

Please log in or register to add a comment.

Please log in or register to answer this question.

1 Answer

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags