[英]IE7 expression not equal to table-cell height
I'm vertically centering multi-lined text with my code. 我用我的代码垂直居中多行文本。 It works in all modern browsers, but not in IE7. 它适用于所有现代浏览器,但不适用于IE7。 I searched around and found me a CSS expression on CSS-Tricks that should fix it. 我四处搜索,发现我在CSS-Tricks上有一个CSS表达式,应该修复它。
Unfortunately the height of the element in IE7 is not 107px
, it appears to be bigger. 不幸的是,IE7中元素的高度不是107px
,看起来更大。 I just found out about CSS expressions and have little knowledge about it. 我刚刚发现了CSS表达式并且对它几乎一无所知。
Could anybody indicate the problem and solution? 任何人都可以指出问题和解决方案吗?
CSS CSS
p.caption {
display: table-cell;
height: 107px;
padding: 15px 10px;
border-bottom: 1px solid #cecece;
font-size: 16px;
text-shadow: 0 0 1px #868686;
text-align: center;
vertical-align: middle;
}
IE7 CSS IE7 CSS
p.caption {
clear: expression(
style.marginTop = "" + (offsetHeight < parentNode.offsetHeight ? parseInt((parentNode.offsetHeight - offsetHeight) / 2) + "px" : "0"),
style.clear = "none", 0
);
}
Live example: JSFiddle 实例: JSFiddle
I don't think JSFiddle supports IE expressions? 我不认为JSFiddle支持IE表达式?
You need to add height: 107px; 你需要增加高度:107px; to 'div' but not 'p' 'div'而不是'p'
div#fullWidth{
display: table;
width: 200px;
background: #dddddd;
height: 107px;
}
p.caption{
display: table-cell;
padding: 15px 10px;
font-size: 16px;
text-align: center;
vertical-align: middle;
}
display: table-cell is not supported on IE7. display:IE7不支持table-cell。 So vertical-align is not applied. 因此不应用垂直对齐。 See there: 看那边:
http://quirksmode.org/css/css2/display.html http://quirksmode.org/css/css2/display.html
http://www.kamui.co.uk/2012/01/23/css-display-table-cell-table-row-table-in-ie7/ http://www.kamui.co.uk/2012/01/23/css-display-table-cell-table-row-table-in-ie7/
This bypass seems to work (tested on IE7/8 & FF25): 这种旁路似乎有效(在IE7 / 8和FF25上测试):
CSS: CSS:
div#fullWidth {
display: table;
width: 200px;
background: #dddddd;
height: 107px;
}
p.caption {
display: table-cell;
border-bottom: 1px solid #cecece;
font-size: 16px;
text-shadow: 0 0 1px #868686;
text-align: center;
vertical-align: middle;
_margin-top: expression((parentNode.offsetHeight.offsetHeight/2)-(parseInt(this.offsetHeight)/2) <0 ? "0":(parentNode.offsetHeight/2)-(parseInt(this.offsetHeight)/2) +'px');
}
HTML: HTML:
<div id="fullWidth">
<p class="caption">Testing 1,2,4,5,6,7,8,9,10 1,2,4,5,6,7,8,9,10</p>
</div>
The "_" in the CSS is another bypass taken into account only by IE (not sure for IE9 & 10). CSS中的“_”是仅由IE考虑的另一个旁路(不确定IE9和10)。 FF, Chrome and Opera will ignore it. FF,Chrome和Opera都会忽略它。
Be careful on height: it is defined on parent element size. 注意高度:它是在父元素大小上定义的。 As always on IE, an element size is applied if all its parents height (or width) are set. 与IE一样,如果设置了所有父项高度(或宽度),则应用元素大小。
_height: 100%;
_width: 100%;
can be useful. 可能很有用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.