Кнопка jquery UI не работает в IE 9? - PullRequest
Новая
       21

Кнопка jquery UI не работает в IE 9?

2 голосов
/ 27 марта 2011

Кажется, есть проблема с кнопками пользовательского интерфейса jquery в IE 9?

Вот как они выглядят нормально:

enter image description here

В IE 9 они выглядят так:

enter image description here

HTML-код кнопки: 

        <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" >

Код запроса: 

$(document).ready(function() {

    $('.input-submit').button();

});

Это известная проблема? Я использую последний пользовательский интерфейс jquery (скачанный вчера). Как это решить?

Ответы [ 9 ]

3 голосов
/ 14 апреля 2011

Javascript CurvyCorners вмешивается в стили, объявленные jQueryUI.

Сбой CurvyCorners, потому что он по-прежнему вызывает scanStyles в IE9, хотя IE9 поддерживает border-radius( Поддержка "border-radius" в IE ), и я подозреваю, что это вызывает конфликты с существующими стилями, объявленными jQueryUI.

http://code.google.com/p/curvycorners/source/browse/trunk/curvycorners.src.js#93 должно быть: 

this.supportsCorners = this.ieVer >= 9.0;

Загрузите curvycorners.src.js , измените эту строку и используйте ее вместо текущего файла curvycorners.src.js, и стили кнопок будут отображаться правильно.

2 голосов
/ 09 апреля 2011

Ваш пример работает на меня в IE9. Проверьте http://jsfiddle.net/tKksD/4/. Убедитесь, что в вашем заголовке загружен файл jquery-ui.css. Затем поместите оба ваших jQuery.js и jQueryUI.js непосредственно перед </body> закрывающим тегом. И наконец, поместите ваш код jQuery до </body> и после ваших сценариев jQuery.js и jQueryUi.js.

Вы также можете сделать это, используя: 

$('input:button').button();

Проверьте рабочий пример на http://jsfiddle.net/tKksD/

Или 

<button></button>` instead of `<input type"button" />

Проверьте рабочий пример на http://jsfiddle.net/tKksD/

1 голос
/ 24 мая 2011

Или посмотрите на IE9 compat.view ..

Я думаю, что это как-то связано с doctype aso.

Может быть, что-то вроде этого:

<\ meta http-эквивалент = \ X-UA-Совместимое содержимое = IE = edge>

1 голос
/ 14 апреля 2011

У меня вчера была похожая проблема, просто посмотрите и добавьте закрытие 

   <input
         type="submit"
         name="submit_intermediate_question"
         id="submit-intermediate-question"
         value="Odoslať"
         class="input-submit" /> <--

У меня было согласие, которое не работало из-за этого.

1 голос
/ 14 апреля 2011

Мне удалось получить работающую кнопку на странице, отменив выбор некоторых стилей, помеченных как встроенные, с помощью инструментов разработчика IE9.(все границы) Вы можете увидеть встроенные стили на изображении ниже.Я еще не выяснил, почему или где, но я постараюсь провести дополнительное расследование позже (надеюсь сегодня) и обновлю этот ответ, когда получу больше информации.Надеюсь, это может помочь на данный момент.

Showing it working in IE9

1 голос
/ 10 апреля 2011

Может быть, вы скачиваете jquery и прикрепленные к нему скрипты локально, но URL к графике относительны, поэтому браузер не может открывать изображения.Попробуйте использовать firebug для IE, чтобы проверить, есть ли попытка загрузки изображений + вы можете проверить, нет ли ошибок в вашем js.

В качестве альтернативы IE9 имеет инструменты разработчика, которые могут быть полезны.

1 голос
/ 09 апреля 2011

После загрузки тестовой страницы, избавление от curvycorners исправило ее. Возможно, вы могли бы попробовать использовать другой метод, чтобы получить закругленные углы.

1 голос
/ 08 апреля 2011

Просто охватывает все базы здесь, но я предполагаю, что вы используете последнюю версию jQuery? v1.5.1 была первой версией, поддерживающей IE9 в качестве браузера верхнего уровня. На заметку о том, что любая смутно свежая версия jQuery UI все равно нуждается в jQuery 1.3.2+.

1 голос
/ 03 апреля 2011

Попробуйте проверить CSS-файлы и файлы JavaScript. Вы можете пропустить какой-то файл. 

<link href="{your path to jquery}/themes/base/jquery.ui.core.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.theme.css" rel="stylesheet" type="text/css" />
<link href="{your path to jquery}/themes/base/jquery.ui.button.css" rel="stylesheet" type="text/css" />

<script src="{your path to jquery}/jquery-1.5.1.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.core.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.widget.min.js" type="text/javascript"></script>
<script src="{your path to jquery}/ui/minified/jquery.ui.button.min.js" type="text/javascript"></script>
...