Почему мои анимированные кнопки не работают в IE8 и как подключить их для IE8

Question

Почему мои анимированные кнопки не работают в IE8 и как подключить их для IE8

0

Я пытаюсь поместить анимированную кнопку на свою страницу, но когда я открываю ее через IE 8, она не работает. Он работает в Crome.Below - это часть кода:

JSP Страница:

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" href="mystyle.css" rel="stylesheet">

    <title>JSP Page</title>
</head>
<body>
    <button class="depth" type="button">&#10004;</button>
    <button class="stat" type="button">&#10004;</button>
</body>
</html>

Файл Css (mystyle.css):

html {
-webkit-tap-highlight-color: hsla(0,0,0,0);
        tap-highlight-color: hsla(0,0,0,0);
}
body {
background-color: #363636;
background-image:         linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25)),
                          linear-gradient(45deg, hsla(0,0%,0%,.25) 25%, transparent 25%, transparent 75%, hsla(0,0%,0%,.25) 75%, hsla(0,0%,0%,.25));
background-position:0 0, 2px 2px;
background-size:4px 4px;
padding: 100px;
}
button.depth {
left: 20%;
margin: -40px;
position: absolute;
top: 20%;
}
button.stat {
left: 40%;
margin: -40px;
position: absolute;
top: 40%;
}
button:hover,
button:active {
outline: 0;
}

/* 3D Button */

button {
background: #444;
border: none;
border-radius: 80px;
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
            inset 0 0 2px 4px hsla(0,0%,0%,.2),
            inset 0 0 2px 6px hsla(0,0%,0%,.2),
            inset 0 0 1px 8px hsla(0,0%,0%,.5),
            inset 0 -4px 2px 4px hsla(0,0%,0%,.5),
            inset 0 1px 1px 8px hsla(0,0%,100%,.25),
            inset 0 -30px 30px hsla(0,0%,0%,.2),
            0 -4px 8px 4px hsla(0,0%,0%,.5),
            0 10px 10px hsla(0,0%,0%,.25),
            0 0 2px 2px hsla(0,0%,0%,.2),
            0 0 2px 4px hsla(0,0%,0%,.2),
            0 0 2px 6px hsla(0,0%,0%,.2),
            0 0 2px 8px hsla(0,0%,0%,.5),
            0 1px 2px 8px hsla(0,0%,100%,.25),
            0 -1px 2px 8px hsla(0,0%,0%,.5);
color: #303030;
cursor: pointer;
font: bold 40px/85px sans-serif;
height: 80px;
padding: 0;
text-shadow: 0 1px 1px hsla(0,0%,100%,.25),
             0 -1px 1px hsla(0,0%,0%,.75);
width: 80px;
}
button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
             0 1px 1px hsla(0,0%,100%,.25),
             0 -1px 1px hsla(0,0%,0%,.75);
}
button:active {
box-shadow: inset 0 0 2px 2px hsla(0,0%,0%,.2),
            inset 0 0 2px 4px hsla(0,0%,0%,.2),
            inset 0 0 2px 6px hsla(0,0%,0%,.2),
            inset 0 0 1px 7px hsla(0,0%,0%,.5),
            inset 0 5px 15px 7px hsla(0,0%,0%,.15),
            inset 0 -4px 2px 3px hsla(0,0%,0%,.5),
            inset 0 1px 1px 7px hsla(0,0%,100%,.25),
            inset 0 -30px 30px hsla(0,0%,0%,.1),
            inset 0 30px 30px hsla(0,0%,0%,.2),
            0 -4px 8px 4px hsla(0,0%,0%,.5),
            0 5px 10px hsla(0,0%,0%,.25),
            0 0 2px 2px hsla(0,0%,0%,.2),
            0 0 2px 4px hsla(0,0%,0%,.2),
            0 0 2px 6px hsla(0,0%,0%,.2),
            0 0 2px 8px hsla(0,0%,0%,.5),
            0 1px 2px 8px hsla(0,0%,100%,.25),
            0 -1px 2px 8px hsla(0,0%,0%,.5);
line-height: 86px;
}

Пожалуйста, предложите мне какой-нибудь метод преодоления этой проблемы

Shashank Vivek 25 март 2014, в 13:24

Источник

Теги:

html

css

internet-explorer-8

1 ответ

Ещё вопросы

Pravin Waychal · Answer 1 · 2014-03-25T10-14-00.000Z

В этом случае CSS3 PIE может оказаться полезным. поскольку большинство свойств CSS3 не поддерживаются ниже IE9

Пожалуйста, найдите полезную ссылку

http://css3pie.com/documentation/getting-started/

в CSS везде, где есть CSS3 несовместимое свойство в IE8, вам нужно добавить стиль как

behavior: url(PIE.htc /*path to htc file*/);

пример

button:hover,
button.depth:focus {
color: #0ab;
text-shadow: 0 0 20px hsla(240,75%,75%,.5),
             0 1px 1px hsla(0,0%,100%,.25),
             0 -1px 1px hsla(0,0%,0%,.75);

 behavior: url(PIE.htc);   
}

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

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