IE7和CSS表格單元格屬性

所以我只是喜歡它，當我的應用程序在Firefox中工作得很好，但隨後我在IE中打開它，並且...不，請再試一次。IE7和CSS表格單元格屬性

我遇到的問題是我使用JavaScript將CSS顯示屬性設置爲none或table-cell。

我最初使用的是display: block，但是如果沒有table-cell屬性，Firefox會顯得很奇怪。

我很想做到這一點，而不用在JavaScript中添加黑客來測試IE。有什麼建議麼？

謝謝。

來源

2008-10-30 Ryan Smith

好玩，你用Firefox的一個黑客然後尋找一個IE瀏覽器的黑客..;） – NibblyPig 2010-04-06 15:43:09

解決這個display值設置爲''的一個好辦法：

<script type="text/javascript"> 
<!-- 
function toggle(elemntId) { 
    if (document.getElementById(elemntId).style.display != 'none') { 
     document.getElementById(elemntId).style.display = 'none'; 
    } else { 
     document.getElementById(elemntId).style.display = ''; 
    } 
    return true; 
} 
//--> 
</script>

空值將導致樣式恢復到它的默認值。該解決方案適用於所有主流瀏覽器。

來源

2009-03-14 14:14:35 Jacco

在鉻，你可以將它設置爲`初始`。 :) – Shaz 2011-04-17 01:16:24

那麼，IE7 does not have display: table(-cell/-row)所以你必須找出別的東西或做瀏覽器定位（我同意，是壞的破解）。作爲一個快速解決方案（我不知道你想要實現什麼，外觀上），你可以嘗試display: inline-block，看看它是什麼樣子。

也許想出辦法做display: block並解決「Firefox渲染它怪異」的問題呢？你能準確地描述你怪異渲染的含義嗎？

來源

2008-10-30 02:24:21 joelhardi

當您設置在Firefox阻止，它呈現在表格單元格上的每個頂部其他而不是並排。我會重寫整個事情來代替使用DIV，但我對此很懶，所以我只是寫了sh ** ty hack代碼。 – 2008-10-30 02:26:35

很酷，標記是什麼樣的？ – joelhardi 2008-10-30 02:27:50

如果你正在做某種塊級別的元素，你可以將它們設置爲浮動「float：left」，所以在Firefox中，它們將堆疊在一起而不是成行。或者「display：inline-block」可能在這裏工作，但在IE7中它只能用於通常內聯的元素，比如a或em。 – joelhardi 2008-10-30 02:30:31

你永遠不需要Javascript來測試IE，使用conditional comments。

你可以看看解決方案these guys想出處理IE中表格式的顯示。

來源

2008-10-30 04:00:28 eyelidlessness

我一直在使用CSS十多年，我從來沒有機會使用display：table-cell，而且我唯一使用條件註釋的方法是隱藏IE6的高級效果。

我懷疑，不同的方法會以本質上跨瀏覽器的方式解決您的問題。你能否打開一個單獨的問題來描述你試圖達到的效果，併發布當前在Firefox中工作的HTML和CSS？

來源

2008-10-30 13:49:01

我有同樣的問題，並使用

*float: left;

「*」表示只有IE

來源

2009-08-05 21:26:04

我已經解決了這個使用jQuery：

$(document).ready(function(){ 
    if ($.browser.msie && $.browser.version == 7) 
    { 
    $(".tablecell").wrap("<td />"); 
    $(".tablerow").wrap("<tr />"); 
    $(".table").wrapInner("<table />"); 
    } 
});

上面的腳本假定您已經申報單使用方式如：

<style> 
.table  { display: table; } 
.tablerow { display: table-row; } 
.tablecell { display: table-cell; } 
</style>

來源

2011-02-10 22:35:19

使用內聯塊適用於此類型的內容。不，IE 6和IE 7在技術上沒有顯示：inline-block的，但你可以複製與以下樣式的行爲：

div.show-ib { 
    display: inline-block; 
    *zoom: 1; 
    *display: inline; 
}

這裏的關鍵是「放大：1」切換「hasLayout的」該元素的屬性改變了瀏覽器渲染塊級元素的方式。內嵌塊唯一的缺陷是你的邊距不能小於4px。

來源

2011-08-08 21:07:12 risingfish

A碼示例的FOT條件註釋該用戶eyelidlessness，請公佈

「[如果LT IE 8]」僅在瀏覽器是IE比IE8較低，因爲IE8做對的工作原理。隨着條件註釋IE7安排的DIV很好水平...... HTML：

<div class="container"> 
    <!--[if lt IE 8 ]><table><tr><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div class="link"><a href="en.html">English</a></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div tabindex="0" class="thumb"><img src="pictures\pic.jpg" /></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]><td><![endif]--> 
    <div class="link"><a href="de.html">Deutsch</a></div> 
    <!--[if lt IE 8 ]></td><![endif]--> 
    <!--[if lt IE 8 ]></tr></table><![endif]--> 
</div>

我的CSS

.link { 
display:table-cell; 
vertical-align:middle; 
} 
div.container { 
margin: 0 auto; 
display:table; 
} 
.thumb { 
display:table-cell; 
float: left; 
text-align: center; 
}

IE 8和9一樣FireFox中的CSS工作。使用表格和TD & TR標籤，IE7看起來相同。在一些頁面上，IE 8只有20％的時間工作，所以我用[如果lt IE 9]

這也有助於平滑IE7無法處理的垂直對齊問題。

來源

2012-09-07 14:36:36

我嘗試了一切，我發現所有跨瀏覽器的唯一方法是使用Javascript/jquery。這是一個乾淨的輕量級解決方案：click here

來源

2013-01-23 17:29:58 Mike6679

IE7不支持display:inline-block;。一個明顯的黑客是zoom: 1; *display: inline;後你的CSS爲display:table-cell;

來源

2014-05-19 19:29:59

IE7和CSS表格單元格屬性

回答

相關問題