Bry*_*eld 3 css jquery html-table opacity internet-explorer-9
Internet Explorer 9现在支持不透明度规则和过滤规则.
这会导致问题.见例子
HTML
<!DOCTYPE html>
<html>
<head>
<title>To standard or not to standard</title>
<script src="http://code.jquery.com/jquery-1.7.1.js"></script>
<style type="text/css">
form, table { opacity: 0; filter: alpha(opacity=0); }
</style>
</head>
<body>
<form action="javascript:">
Now you see me...
<table><tr><td>Now you don't!</td></tr></table>
</form>
<script>
$('form, table').animate({
opacity: 1
});
</script>
</body>
</html>
如果你在IE9中查看这个,一旦动画完成,表格就会消失
(注意,如果你重新加载,它可能会切换到IE7文档标准,使用F12工具返回IE9)
问题是由内联CSS仅使用标准opacity规则引起的,而不是filter规则引起的.
请注意,父表单没有问题.
在现实世界中,表格不透明度仅在异步操作完成后才会生成动画.这就是为什么我不能把不透明度放在桌子上.
你怎么建议我克服这个？我想的可能是CSS中的IE条件版本代码,或者可能是一些额外的JavaScript.我也可以停止使用似乎也可以修复它的表格,但我想知道你会推荐什么.
编辑:如果你想知道我为什么使用表格.
我使用以下布局.
label A: [input ]
label Second: [input ] [button]
我在这里找到的优点是
备选方案A: Div左对齐.使用第一行上的可见性隐藏按钮,以获得精确宽度的空白空间,以实现一致对齐.
备选方案B:标签具有硬编码宽度的浮动div,以及所需垂直对齐和行高的固定行高.