IE9 很困惑是使用标准，还是微软专有的不透明性

发布于 2024-12-29 01:28:29 字数 1544 浏览 5 评论 0原文

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 规则而不是 <代码>过滤规则。

请注意，父表单没有问题。

在现实世界中，表不透明度仅在异步操作完成后才会动画化。这就是为什么我不能只将不透明度放在桌子上。

你建议我如何克服这个问题？我想也许是 CSS 中的 IE 条件版本代码，或者可能是一些额外的 JavaScript。我也可以停止使用一个表格，似乎也可以解决这个问题，但我想知道你会推荐什么。

编辑：如果您想知道我为什么使用表格。

我正在使用以下布局。

label A:      [input    ]
label Second: [input    ] [button]

我在这里发现的优点是

第一列自动将其宽度设置为最宽的标签。
行高由最大元素自动确定，在本例中为按钮。
标签垂直居中对齐，与输入对齐时更令人愉悦。

替代方案A： Div浮动左对齐右对齐。在第一行上有一个可见性隐藏按钮，以获得精确宽度的空白空间以实现一致的对齐。

替代方案 B： 浮动 div，具有硬编码的标签宽度以及所需的垂直对齐和行高的固定行高。

原文

Internet Explorer 9 now supports both the opacity rule and the filter rule.

This causes a problem. See 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>

If you view this in IE9, the table will disappear as soon as the animation completes
(beware, if you reload, it may switch to IE7 document standards, go back to IE9 using the F12 tools)

The problem is caused by the inline CSS using only the standard opacity rule, and not the filter rule.

Notice that the parent form has no problem.

In the real world, the table opacity is animated only after an async operation is complete. That is why I cannot put the opacity on the table only.

How would you suggest I overcome this? I was thinking maybe an IE conditional version code in the CSS, or perhaps some additional JavaScript. I could also stop using a table which seems to fix it also, but I wanted to know what you would recommend.

Edit: In case you wonder why I am using a table.

I am using the following layout.

label A:      [input    ]
label Second: [input    ] [button]

The advantages I find here are

The first column automatically sets its width to the widest label.
The row height is automatically determined by the largest element, in this case that would be the button.
The label is vertically aligned middle which is more pleasing when aligning to the input.

Alternative A: Div float left align right. With a visibility hidden button on the first row in order to get blank space of exact width for consistent alignment.

Alternative B: Floating divs with hard-coded width for the labels and a fixed line height for the vertical align and row height desired.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

小清晰的声音 2025-01-05 01:28:29

我会停止使用桌子。

除非您专门显示表格数据。在这种情况下，请将过滤规则粘贴到针对 IE8 及更低版本的条件注释中

回复收藏 0 原文

转身泪倾城 2025-01-05 01:28:29

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

1) 停止使用表格进行布局。如果它解决了其他问题，那就太好了，但这只是一个附带好处。

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="#" ...

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

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

It's a little unclear what end-result or effect you're trying to achieve. Why are you using a form with the action="javascript;" when jQuery could handle it nicely?

1) Stop using tables for layout. If it fixes the other issues, then great, but that's only a side benefit.

2a) You're already using jQuery, so you could initially set opacity with it on DOM ready. The benefit is that jQuery then handles any cross browser issues with opacity.

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

2b) Alternatively, you can simply use jQuery's .hide() and .show(), which, when used with duration, animates the opacity.

On DOM ready, it's hidden...

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

and inside whatever function to show it...

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

2c) Or better yet, don't use opacity to hide it initially...

form, table { display: none; }

and inside whatever function to show it...

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

EDIT:

As per comments:

<form action="#" ...

Does not require a return false if you use preventDefault in the submit handler...

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

回复收藏 0 原文

-柠檬树下少年和吉他 2025-01-05 01:28:29

我很乐意离开桌子（即使在他们带来争论之后），所以我会赞成最小的修改。

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

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

并替换
CSS form, table { 不透明度 0;过滤器：alpha（不透明度=0）； }
与 form { 不透明度 0;过滤器：alpha（不透明度=0）； }。

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

回复收藏 0 原文

~没有更多了~

关于作者

手长情犹

暂无简介

文章

28 人气

关注发私信

友情链接

文江博客

IE9 很困惑是使用标准，还是微软专有的不透明性

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

yuanzihao09

1337793151

横笛休吹塞上声

你在我安

qq_QhAHT0kB

aaaa123451

友情链接

IE9 很困惑是使用标准，还是微软专有的不透明性

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

yuanzihao09

1337793151

横笛休吹塞上声

你在我安

qq_QhAHT0kB

aaaa123451

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。