Question

Internet Explorer 9现在支持不透明度规则和过滤规则。

这会导致问题。见Example

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，以及所需垂直对齐和行高的固定行高。

Answer 1

我不再使用桌子了。

除非您专门显示表格数据。在这种情况下，请将过滤规则粘贴到针对IE8及以下

的条件注释中

Answer 2

有点不清楚你想要达到的最终结果或效果。当jQuery可以很好地处理它时，为什么使用form和action="javascript;"？

1）停止使用tables进行布局。如果它解决了其他问题，那么很好，但这只是一个附带的好处。

2a）您已经在使用jQuery，因此您最初可以在DOM就绪时使用它设置不透明度。好处是jQuery然后处理任何不透明的跨浏览器问题。

$(document).ready(function() {
    $('form, table').css('opacity', 0);
});

2b）或者，你可以简单地使用jQuery的.hide()和.show()，当与duration一起使用时，可以设置不透明度。

在DOM准备就绪时，它隐藏了......

$(document).ready(function() {
    $('form, table').hide('fast');
});

并在任何显示它的功能内...

$('form, table').show('slow');

2c）或者更好的是，不要使用不透明度来隐藏它...

form, table { display: none; }

并在任何显示它的功能内...

$('form, table').show('slow');

修改

根据评论：

<form action="#" ...

如果您在提交处理程序中使用return false，则不需要preventDefault

$('form').submit(function(e) { e.preventDefault(); // this is first line. // the rest of your submit function });

Answer 3

我可以离开牌桌（即使在他们带来的论据之后），所以我会支持最小的修改。

在现实世界中，表格不透明度仅在异步操作完成后才会生成动画。

我最终使用的解决方案是取代
JavaScript $('form').animate({opacity: 1})
与$('form').animate({opacity: 1}); $('table').css({opacity: 0})

并取代
CSS form, table { opacity 0; filter: alpha(opacity=0); }
与form { opacity 0; filter: alpha(opacity=0); }。

感谢大家的意见。在这里发布问题时，我经常会学到新东西。

IE9很困惑是使用标准还是微软的不透明度

3 个答案: