IE7和CSS table-cell属性
-
05-07-2019 - |
题
所以我喜欢它,当我的应用程序在Firefox中工作得很好,但后来我在IE中打开它... ...不,请再试一次。
我遇到的问题是我正在使用JavaScript将CSS显示属性设置为 none
或 table-cell
。
我最初使用的是 display:block
,但是如果没有 table-cell
属性,Firefox就会让它变得怪异。
如果不在JavaScript中添加黑客来测试IE,我很乐意这样做。有什么建议吗?
感谢。
解决方案
解决此问题的好方法 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>
空值会导致样式恢复为默认值。此解决方案适用于所有主流浏览器。
其他提示
我用jQuery解决了这个问题:
$(document).ready(function(){
if ($.browser.msie && $.browser.version == 7)
{
$(".tablecell").wrap("<td />");
$(".tablerow").wrap("<tr />");
$(".table").wrapInner("<table />");
}
});
上面的脚本假设你有使用样式的div,如:
<style>
.table { display: table; }
.tablerow { display: table-row; }
.tablecell { display: table-cell; }
</style>
我遇到了同样的问题并使用了
*float: left;
&QUOT * QUOT;仅表示IE
嗯, IE7没有 display:table(-cell / -row)
所以你必须想出其他的东西或做浏览器定位(我同意,这是糟糕的黑客攻击)。作为一个快速修复(我不知道你想要实现什么,外观方面)你可以尝试 display:inline-block
并查看它的样子。
也许找出一种方法来做 display:block
并解决“Firefox渲染它很奇怪”的问题。代替?你能准确地描述一下奇怪渲染的意思吗?
使用inline-block适用于此类内容。不,IE 6和IE 7在技术上没有显示:inline-block,但您可以使用以下样式复制行为:
div.show-ib {
display: inline-block;
*zoom: 1;
*display: inline;
}
关键是'zoom:1'切换元素上的'hasLayout'属性,这会改变浏览器呈现块级元素的方式。内联块的唯一问题是你不能有小于4px的余量。
我已经使用CSS超过十年了,我从来没有机会使用display:table-cell,而且我唯一使用条件注释的时候是隐藏IE6的高级效果。
我怀疑采用不同的方法可以通过内在的跨浏览器方式解决您的问题。您是否可以打开一个单独的问题来描述您尝试实现的效果,并发布当前在Firefox中使用的HTML和CSS?
用户eyelidless的条件评论的代码示例,亲切地发布
&quot; [if lt IE 8]&quot;仅当浏览器的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。使用Table和TD&amp; amp; IE7看起来是相同的。 TR标签。在某些页面上,IE 8只有20%的时间工作,所以我使用[if lt IE 9]
这也有助于消除IE7无法处理的垂直对齐问题。
我尝试了一切,我发现的唯一方法就是使用Javascript / Jquery。这是一个干净轻量级的解决方案:点击此处
IE7不支持 display:inline-block;
。一个明显的黑客是 zoom:1; * display:inline;
在你的css之后为显示:table-cell;