当前位置：首页 → 问答吧 → 如何兼容IE 6 请大家帮帮忙

如何兼容IE 6 请大家帮帮忙

时间：2011-04-26

来源：互联网

点击后下面的层没有变成最上面的层。也就是点击不起作用。还有希望使得ie6也被兼容吗

谢谢大家

复制内容到剪贴板

代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>CSS3 transitions gallery</title>
<style>
    body {
        background: #dce4e4;
        font-family: Georgia, "Times New Roman", Times, serif;}
    #gallery {
        width: 1000px;
        height: 1200px;
        margin: 20px auto;
        padding: 40px;
        position: relative;}

        #gallery div {
            background: #fff;
            position: absolute;
            overflow: hidden;
            opacity: 0.9;
            -webkit-transition: all 1500ms linear;
            -webkit-border-radius: 15px;
            -moz-border-radius: 15px;
            border-radius: 15px;
            -webkit-box-shadow: -3px -3px 50px #666;
            -moz-box-shadow: -3px -3px 50px #666;
            box-shadow: -3px -3px 50px #666;}

        #gallery div#img1:hover,
        #gallery div#img2:hover,
        #gallery div#img3:hover,
        #gallery div#img4:hover,
        #gallery div#img5:hover,
        #gallery div#img6:hover {
            z-index: 999;
            -webkit-transform: rotate(0deg);
            -moz-transform: rotate(0deg);
            opacity: 1;}


        #gallery span {
            position: absolute;
            right: 0;
            bottom: 15px;
            color: #999;
            background: #fff;
            width: 35%;
            text-align: right;
            padding: 10px;
            font-size: 13px;
            font-weight: bold;}


        #gallery img {
            -webkit-mask-box-image: url(images/background.svg);
            -webkit-mask-repeat: none;}

        #gallery #img1 {
            -webkit-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            top: 50px;
            left: 130px;
            z-index:1;}

        #gallery #img2 {
            -webkit-transform: rotate(-15deg);
            -moz-transform: rotate(-15deg);
            top: 300px;
            left:100px;
            z-index:7;}

        #gallery #img3 {
            -webkit-transform: rotate(-5deg);
            -moz-transform: rotate(-15deg);
            top: 450px;
            left:350px;
            z-index:3;}

            #img3 img {
                width: 350px;}
        #gallery #img4 { /* eye */
            -webkit-transform: rotate(-10deg);
            -moz-transform: rotate(-10deg);
            top: 450px;
            left: 650px;
            z-index:4;}

        #gallery #img5 {
            -webkit-transform: rotate(5deg);
            -moz-transform: rotate(5deg);
            top: -100px;
            right: 200px;
            z-index:5;}

        #gallery #img6 {
            -webkit-transform: rotate(20deg);
            -moz-transform: rotate(20deg);
            top: 220px;
            right: 120px;
            z-index:6;}
</style>
</head>
<body>
<div id="gallery">
    <div id="img1">
        <img src="images/image1.jpg">
        <span>Image 1 caption</span>
    </div>
    <div id="img2">
        <img src="images/image2.jpg">
        <span>Image 2 caption</span>
    </div>
    <div id="img3">
        <img src="images/image3.jpg">
        <span>Image 3 caption</span>
    </div>
    <div id="img4">
        <img src="images/image4.jpg">
        <span>Image 4 caption</span>
    </div>
    <div id="img5">
        <img src="images/image5.jpg">
        <span>Image 5 caption</span>
    </div>
    <div id="img6">
        <img src="images/image6.jpg">
        <span>Image 6 caption</span>
    </div>
</div>
</body>
</html>

作者: buypro 发布时间: 2011-04-26

<font color=red> <head> <title>CSS3 transitions gallery</title> <style> body { background: #dce4e4; font-family: Georgia, "Times New Roman", Times, serif;} #gallery { width: 1000px; height: 1200px; margin: 20px auto; padding: 40px; position: relative;} #gallery div { background: #fff; position: absolute; overflow: hidden; opacity: 0.9; -webkit-transition: all 1500ms linear; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: -3px -3px 50px #666; -moz-box-shadow: -3px -3px 50px #666; box-shadow: -3px -3px 50px #666;} #gallery div#img1:hover, #gallery div#img2:hover, #gallery div#img3:hover, #gallery div#img4:hover, #gallery div#img5:hover, #gallery div#img6:hover { z-index: 999; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); opacity: 1;} #gallery span { position: absolute; right: 0; bottom: 15px; color: #999; background: #fff; width: 35%; text-align: right; padding: 10px; font-size: 13px; font-weight: bold;} #gallery img { -webkit-mask-box-image: url(images/background.svg); -webkit-mask-repeat: none;} #gallery #img1 { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); top: 50px; left: 130px; z-index:1;} #gallery #img2 { -webkit-transform: rotate(-15deg); -moz-transform: rotate(-15deg); top: 300px; left:100px; z-index:7;} #gallery #img3 { -webkit-transform: rotate(-5deg); -moz-transform: rotate(-15deg); top: 450px; left:350px; z-index:3;} #img3 img { width: 350px;} #gallery #img4 { /* eye */ -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); top: 450px; left: 650px; z-index:4;} #gallery #img5 { -webkit-transform: rotate(5deg); -moz-transform: rotate(5deg); top: -100px; right: 200px; z-index:5;} #gallery #img6 { -webkit-transform: rotate(20deg); -moz-transform: rotate(20deg); top: 220px; right: 120px; z-index:6;} </style> </head> <body> <div id="gallery"> <div id="img1"> <img src="http://www.alexandtheweb.com/demos/images/image1.jpg"> <span>Image 1 caption</span> </div> <div id="img2"> <img src="http://www.alexandtheweb.com/demos/images/image2.jpg"> <span>Image 2 caption</span> </div> <div id="img3"> <img src="http://www.alexandtheweb.com/demos/images/image3.jpg"> <span>Image 3 caption</span> </div> <div id="img4"> <img src="http://www.alexandtheweb.com/demos/images/image4.jpg"> <span>Image 4 caption</span> </div> <div id="img5"> <img src="http://www.alexandtheweb.com/demos/images/image5.jpg"> <span>Image 5 caption</span> </div> <div id="img6"> <img src="http://www.alexandtheweb.com/demos/images/image6.jpg"> <span>Image 6 caption</span> </div> </div> </body> </font>
提示：您可以先修改部分代码再运行

[ 本帖最后由 buypro 于 2011-4-26 12:21 编辑 ]

作者: buypro 发布时间: 2011-04-26

如何兼容IE 6 请大家帮帮忙

代码:

热门阅读

热门下载