Question

我正在尝试在我的页面上放置动画按钮但是当我通过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;
}

请建议我一些方法来克服这个问题

Answer 1

在这种情况下，CSS3 PIE可能会有所帮助。因为IE9下面不支持大多数CSS3属性

请找到有用的链接

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

在CSS中，如果IE8中存在CSS3不兼容属性，则需要将样式添加为

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);   
}

旁注：建议.htc文件只能用于降级浏览器而不能用于现代浏览器，在这种情况下你可以使用条件注释

希望这有帮助！

为什么我的动画按钮在IE8中不起作用以及如何将其转换为IE8

1 个答案: