IE9 не понимает, использовать ли стандарты или непрозрачность Microsoft Proprietary - PullRequest
Новая
       28

IE9 не понимает, использовать ли стандарты или непрозрачность Microsoft Proprietary

3 голосов
/ 26 января 2012

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, вернуться к IE9 с помощью инструментов F12)

Проблема вызвана встроенным CSS, использующим только стандартное правило opacity, а не правило filter.

Обратите внимание, что у родительской формы нет проблем.

В реальном мире непрозрачность таблицы анимируется только после завершения асинхронной операции.Вот почему я не могу поставить непрозрачность только на стол.

Как бы вы предложили мне преодолеть это?Я думал, может быть, условный код версии IE в CSS, или, возможно, какой-то дополнительный JavaScript.Я также мог бы прекратить использовать таблицу, которая кажется , чтобы исправить это, но я хотел знать, что вы порекомендуете.

Редактировать: На случай, если вы удивитесь, почему яЯ использую таблицу.

Я использую следующую раскладку. 

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

Преимущества, которые я здесь нахожу:

  • Первый столбец автоматически устанавливает ширину равнойсамая широкая метка.
  • Высота строки автоматически определяется наибольшим элементом, в данном случае это будет кнопка.
  • Метка расположена вертикально по центру, что более удобно при выравнивании поinput.

Альтернатива A: Div float left align right right.Со скрытой кнопкой видимости в первом ряду, чтобы получить пустое пространство точной ширины для последовательного выравнивания.

Альтернатива B: Плавающие делители с жестко заданной шириной для меток и фиксированнымвысота строки для вертикального выравнивания и желаемой высоты строки.

Ответы [ 3 ]

6 голосов
/ 26 января 2012

Я бы прекратил использовать стол.

Если вы специально не показываете табличные данные.В этом случае вставьте правило фильтра в условный комментарий с таргетингом на IE8 и ниже

2 голосов
/ 26 января 2012

Немного неясно, какого конечного результата или эффекта вы пытаетесь достичь. Почему вы используете form с action="javascript;", когда jQuery может с этим справиться?

1) Прекратить использование tables для макета. Если это решит другие проблемы, то отлично, но это только побочное преимущество.

2a) Вы уже используете jQuery, поэтому вы можете изначально установить непрозрачность с его помощью в DOM ready. Преимущество заключается в том, что 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');

EDIT:

Согласно комментариям: 

<form action="#" ...

Не требует return false, если вы используете preventDefault в обработчике отправки ... 

$('form').submit(function(e) {
    e.preventDefault();  // this is first line.
    //  the rest of your submit function
});
0 голосов
/ 26 января 2012

Я в порядке, оставляя таблицы (даже после аргументов, которые они приводят), поэтому я предпочту минимальные модификации.

В реальном мире прозрачность таблицы анимируется только после завершения асинхронной операции.

Решение, которое я выбрал, было заменой
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); }.

Спасибо всем за ваш вклад. Я часто узнаю что-то новое, когда пишу вопросы здесь.

...