CSS - 如何让 IE7 尊重最小宽度答案

【问题标题】：CSS - How to make IE7 respect min-widthCSS - 如何让 IE7 尊重最小宽度
【发布时间】：2014-06-20 00:46:18
【问题描述】：

IE7 忽略了我的最小宽度设置。我读到只要您处于标准模式（不是怪癖），IE7 就支持最小宽度。我指定了

<!DOCTYPE html>

作为我的标题。标记是valid. 我仍然无法让IE7 尊重min-width。我该怎么办？

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

【问题讨论】：

标签： html css

【解决方案1】：

啊是的..我前段时间遇到过这个

查看此链接

http://blog.throbs.net/2006/11/17/IE7+And+MinWidth+.aspx

基本上...你需要在 JS 中包含这个 shim 来手动破解规则

以下是我的处理方式

只需调用body的函数onload

    /*
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{
            //??
         }
      }
   }
}

还有另一种方法

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 */
}

【讨论】：

+1 第一种方法有效。第二个我不知道如何将其转化为我的需要，没有奏效。我不明白语法。我很好奇为什么这么多人说 IE7 在标准模式下支持最小宽度，如果事实上它不支持并且需要这些“hacks”。
是的，这很奇怪.. 第二种方法通过使用 IE 特定的标记来工作，该标记实际上在 css 中运行 JS...当你想到它时有点酷
@P.Brian.Mackey 澄清一下，确实如此。您只是在<td> 上遇到了IE7 不尊重min-width 的错误。第二种方法不起作用，因为* html 选择器只针对 IE6。
第一个函数修复了我在 IE7 中的min-width css。为我节省了一些时间，谢谢！

【解决方案2】：

我是新手，所以显然我无法评论@samccone 上面的第一个答案。只是想添加它确实有效，但会在 IE9 中产生错误，就像他创建非破坏空间元素的方式一样，即...

shim.appendChild(document.createElement("&nbsp;"));

该行可以替换为...

shim.innerHTML = "&nbsp;";

一切都很好。希望这可以帮助某人。

【讨论】：

【解决方案3】：

标记有效。

不，就那个时代而言，<!DOCTYPE html> 无效。据我所知，只有 HTML5 才有效，IE7 肯定不知道（IE9 有点知道，不确定 8）。在我正在处理的页面上，min-width 即使在 body 标签上也能正常工作。但是，我们在这个特定页面上使用了 XHTML：

<!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">

此外，其他因素可能会使 IE 脱离标准模式并将其带入怪癖模式，因此即使是正确的文档类型也可能无法为您解决问题。因此，如果您必须使用 HTML5 并与 IE7 兼容，您将不得不求助于 behaviour CSS 属性、条件注释和/或特定于 IE7 的脚本。

【讨论】：