Проблема с IE8

Question

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

Прежде всего, вот временное местоположение сайта: http://capitalpay.co.uk/.

1

---

Итак, проблемы следующие: форма логина / регистрации имеет черный прямоугольник вместо прозрачности:

И стиль:

#LoginPart
{
    background-image: url('../images/login_bg.png');
    float: right;
    width: 184px;
    height: 25px;
    margin-top: 10px;
    margin-right: 100px;

    text-align: center;
}

А вот этот фон (немного некрасиво):

2

---

Мое меню плохо выделяется ... Я знаю, что код не самый лучший, но он работает в других браузерах

S

CSS

        <div id="Menu">
            <ul id="Navigation">
              <li><a href="#home"><div class="HighlightItem"></div><span>Home</span></a></li>
              <li><a href="#vending"><div class="HighlightItem"></div><span>Vending machine</span></a></li>
              <li><a href="#videos"><div class="HighlightItem"></div><span>Videos</span></a></li>
              <li><a href="#about"><div class="HighlightItem"></div><span>About</span></a></li>
              <li><a href="#contact"><div class="HighlightItem"></div><span>Contact</span></a></li>
            </ul>
        </div>

Navigation

#Navigation
{
  margin:0;
  padding:0;

  text-align:center;
  list-style:none;
  height: 50px;
}

.HighlightItem
{
    width: 142px;
    height: 50px;
    position: absolute;
    display: none;
    background:none;
}

#Navigation span
{
    position: relative;
    text-align: center;
    top: 40%;
    font-size: small;
    z-index: 5000;
    font-weight: bold;
    text-shadow: 1px 0px 0px #000;
}

В элементе span есть текст меню. Я сделал z-index: 5000, чтобы сделать его абсолютным div с прозрачностью, но оставил текст над ним.

А вот код JS (Jquery), который я использую для анимации меню:

    $('li>a').hover(function(){
        $(this).children('div').stop();
        $(this).children('div').css({opacity: 0});
        $(this).children('div').css('background-image', 'url("../images/but_hov.png")');
        $(this).children('div').css('background-repeat', 'no-repeat');
        $(this).children('div').css('background-position', 'center center');
        $(this).children('div').fadeTo(400, 1.0);
    }, function(){
            $(this).children('div').stop();
            $(this).children('div').fadeTo(400, 0, function() {
            $(this).children('div').css('background-image', 'none');
            $(this).children('div').hide();
        });
    });

Любая помощь приветствуется!

Answer 1

У меня никогда не было особой удачи с htc-файлами по какой-то причине, но я подумал, что я мог бы также опубликовать это как возможное решение:

http://www.htmlremix.com/css/curved-corner-border-radius-cross-browser

Я знаю, что использование CSS border-radius будет гораздо более целесообразным для всех браузеров, не являющихся браузерами, поэтому, если вы сможете заставить его работать, это может стоить того.

Answer 2

плагин jquery corner, кажется, вызывает проблему 1st , если я запускаю

$(".jquery-corner").css("display", "none");

очищает фоновую проблему. Не уверен, что это также относится к наведению на кнопку, но я бы начал с того, что сначала избавился бы от угла jquery.

Answer 3

IE8 все еще не получает правильную прозрачность PNG. Вот почему вы видите черные рамки на основных моментах меню. Есть сообщение в блоге (одно из многих), объясняющее проблему. Так что это, вероятно, является причиной ваших проблем со сломанным логином и черной рамкой вокруг подсветки меню. Я все еще смотрю на эту проблему и отредактирую этот ответ, если найду хороший способ сделать это.

Редактировать: Итак, это демонстрация чего-то, что примерно работает для меня в IE8 и прекрасно работает в Chrome 11. Я все еще вижу небольшая граница в IE8, но я надеюсь, что это достаточно хорошо для вас. На мой взгляд, кросс-браузерный дизайн с идеальным пиксельным дизайном практически невозможен с желаемыми эффектами, если только вы не хотите полагаться на еще больше JavaScript или (смею сказать) Flash. Пару лет назад я делал подсветку наведения PNG alpha, которая работала в IE6, но она опиралась на пользовательский JavaScript, clear.gif и конкретные классы CSS. Возможно, есть лучший способ сделать это, но это решение довольно легковесное, поскольку оно использует только jQuery для анимации и некоторые специфичные для IE CSS. Возможно, вы захотите поместить стили IE в отдельный файл, если вам нужен правильный «основной» CSS.

Кстати, если бы у вас был непрозрачный фон, это было бы очень просто - вы могли бы просто добавить свойство background-color к <li>, установленному на цвет вашего фона, и прозрачность сработала бы. Есть еще один вопрос , который я прочитал ранее, а также здесь *1019* для отличного ответа, объясняющего, почему в IE возникают проблемы с анимацией прозрачного PNG. Я использовал некоторые из предложений в этих ответах, чтобы помочь с моим решением здесь.

Надеюсь, это поможет!

Answer 4

При возникновении проблемы прозрачности «Логин / регистрация» попытайтесь удалить эту строку из своей головы <script>:

$('#LoginPart').corner('15px');

Похоже, IE это не нравится