有关 TABLE-LAYOUT: fixed; 在ie6和ie8的问题

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了有关 TABLE-LAYOUT: fixed; 在ie6和ie8的问题相关的知识，希望对你有一定的参考价值。

下面这段代码，在ie6和火狐运行的时候，当隐藏一列时，另一列自动放大填充了空白处
在ie8运行的时候，隐藏列的列宽还在占地方。

所以衍生2个问题
1，如果希望在ie8有ie6的效果，该如何写
2，如果希望像ie8一样列宽不变，让表格自适应隐藏列减少的宽度，该如何写

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script>
function cols(num,isShow)
var table=document.getElementById("tb2");
//alert(table);
for(i=0;i<table.rows.length;i++)
table.rows[i].cells[num].style.display=isShow?"none": "inline";
</script>
<input type= "checkbox" onclick="cols(0,this.checked)"/> 隐藏
<input type= "checkbox" onclick="cols(1,this.checked)"/> 隐藏
<table width="100%" border="1" id="tb2" style="TABLE-LAYOUT: fixed;">
<tr >
<td style="display: ">1.1</td>
<td style="display: ">1.2</td>
</tr>
<tr >
<td style="display: ">2.1</td>
<td style="display: ">2.2</td>
</tr>
</table>

DIV+CSS解决IE6，IE7，IE8，FF兼容问题
我搜了一个，这里只说现在主流的几个，（IE6，IE7，IE8，FF）其它的先不管
1.ie8下兼容问题，这个最好处理，转化成ie7兼容就可以。在头部加如下一段代码，然后只要在IE7下兼容了，IE8下面也就兼容了
<meta http-equiv="x-ua-compatible" content="ie=7" />
2.flaot浮动造成IE6下面双倍边距问题，这个最常见，也最好处理，!important解决，比如
margin-left:10px !important;/*IE7,IE8,FF下是10PX*/;
margin-left:5px;/*IE6下属性写的是5PX，但在显示出来的是10px
3.清除块display，这个可以解决浮动造成的块，造成块后，当DIV背景填色或填图片的时候，会出现背景断开或差一小块。这种兼容出现的不太多，我做到现在，只遇到过两次，方法是在出现兼容的DIV的CSS中写一个display:block，或其它属性，中文什么意思我不知道，我英语差，但能达到想要的效果，6 e" Z+ e% |8 G# |
4.很多朋友DIV+CSS的时候，会出现，在IE的几个浏览器下都好了，但是在FF出问题了，用!important又会把IE7做的不兼容，很头疼，在想，有没有什么方法只对FF下进行操做，我用过这个方法，感觉得是百试不爽，就是在属性前面加符号如：*、&，￥，#，@，—，+，加过符号的属性只有IE的浏览器才识别，而FF不识别，方法如下(注意有符号的属性和没符号的属性的顺序)
height:100px;/*FF下显示100的高*/
+height:120px;/*IE678下显示120高*/
5.有时候，会在布局的时候，发现，有一个DIV浮动了，接下来的一个DIV本来是要在下面显示的，结果跑上面去了，这种情况一般在FF下面会出现，解决的办法就是清除一下浮动，在设置过浮动的那个DIV下面加一个DIV，CSS面写个clear:both;如下<div style="float:left;height:100px; width:500px;">
<div style="clear:both;">
<div style="height:100px; width=300px">
6. 再就是居中问题，这个问题在新手身上很多，主要原因是对盒子模型不够理解，没熟记盒子模型，如果发现你的页面没有局中，我现在知道的，有这几个原因：1. 一个是没盒子，就是BODY后的一个大DIV把所有DIV装起来的那个，你没写。2.就是你写了，但是宽度没用绝对宽度：而是用一个相对的宽度，想局中，必须用绝对宽度。-
7.扩展：如果我想在设计的时候，实现IE6，IE7,FF下出现三种不同的效果，比如IE6下背景红色，IE7下蓝色FF下绿色，这里，我自己试过，可以，用兼容的方法（注意顺序，可以好好理解一下）。7 L& t- o7 k- a1 I
background:red;/*FF里显示的红色*/
+background:blue !important;/*IE7下面显示的蓝色*/
+background:green;/*IE6下面显示的绿色*/
在这里，我想说一下，虽然兼容给你带来很多郁闷，让人心烦，但同时，在你做多了后，你会发现，兼容有时候会满足你很多不好达到的效果，就像最后一个，要做那种效果，不用兼容的方法，那你就JS去吧，JS还得想想FF和IE下的不同，当然，JS的兼容，我也不会，我没去研究过。以后的事，先把CSS+DIV学熟再说。
多做，做练，始终把盒子模型放在心中，才会熟练，才会运用自如，才会在做的时候，自然而然就知道哪里会有兼容问题，直接在测试前就解决掉那些最常见的兼容问题。 参考技术A 很简单，，让你的网站使用IE兼容性视图就可以了。。。或者说不要考虑IE6，，以后IE6就要被淘汰了，，XP上可以安装IE8，，所以这样可以让你省很多事情

table-layout:fixed 布局注意事项

table-layout:auto 是表格布局中的默认值，采用浏览器自动表格布局算法，但是缺点会很明显

  • 给td指定的width不一定生效，td的width会自动调整
  • text-overflow: ellipsis也会失效，同样，img会撑大td

举个例子：

    <table>
      <tr>
        <td>31</td>
        <td>32ssssssssssssss</td>
      </tr>
      <tr>
        <td>31</td>
        <td>
          <img src="assets/tiger.png" alt="">
        </td>
      </tr>
    </table>

table {
  display : table;
  width : 200px;
  height : 200px;
  border-collapse : collapse;
  table-layout : auto;
}
td {
  overflow : hidden;
  width : 100px;
  height : 100px;
  border : 1px solid black;
  text-overflow : ellipsis;
}

这样的结果就是这样的：

td 的 width 和 img 都没有溢出隐藏，反而撑大了td，但是如果把 table-layout改为 fixed，效果如图：

td的text-overflow : ellipsis和overflow : hidden都会起作用，但是这里也有几个地方要注意：

  • text-overflow : ellipsis生效的前提是
    1. overflow不为visible，最好是类似hidden的值
    2. 需要指定table的width
  • 如果td的宽度加起来超过table的width，即使给table加上overflow:hidden，td也不会被隐藏。

以上是关于有关 TABLE-LAYOUT: fixed; 在ie6和ie8的问题的主要内容，如果未能解决你的问题，请参考以下文章

精准控制表格列表(table-layout:fixed)

table-layout引起的探索——fixed和auto的区别

table-layout:fixed 布局注意事项

html代码，写了table-layout: fixed 以后 table为啥没100%的宽度

table-layout 表格宽度不随文字改变

table-layout 属性