Question

所以刚刚使用HTML5和CSS3编码制作了我的网站，当我在Chrome浏览器上查看网站时（我在整个创建过程中用来测试我的网站的浏览器），会徽图像就会出现在我想要的地方。但是，当我在Internet Explorer中查看我的网站时，那个图像被移位（不是我希望它的位置）。我试过搞乱绝对的，固定的和相对的位置，但似乎没有任何效果。一切，但在两个浏览器上都有一个图像。我想让它尽可能地在所有浏览器上运行。罐头有人请帮助我：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>My Websites</title>
        <style type="text/css">
            #top, #bottom, #left, #right {
                background: #000015;
                position: fixed;
            }
            #left, #right {
                top: 0; bottom: 0;
                width: 50px;
            }
            #left { left: 0; }
            #right { right: 0; }

            #top, #bottom {
                left: 0; right: 0;
                height: 50px;
            }
            #top { top: 0; }
            #bottom { bottom: 0; }

            th, td {
                padding: 15px;
                table-layout: fixed;
                width: 180px;
                z-index:100;
                padding: 0px;
            }

            td {
                text-align: center;
                font-family:"Times New Roman", Helvetica, sans-serif; 
                font-size: 15pt;
                border-radius:5px
            }

            .center{
                position: fixed;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            .bottomright{
                position: fixed;
                bottom:-2%;
                right:0.5%  
            }

            a {
                color:#00003D;
                text-decoration:none
            }

            a:hover {
                color: orange;
                font-size: 105%;
            }

            .circle {
                background-color: rgba(0,0,0,0);
                border: 5px solid rgba(0,183,229,0.9);
                opacity: .9;
                border-right: 5px solid;
                border-left: 5px solid ;
                border-radius: 50px;
                box-shadow: 0 0 35px #2187e7;
                width: 30px;
                height: 30px;
                margin: 0 auto;
                animation: spinPulse 1s infinite linear;
                -webkit-animation: spinPulse 1s infinite linear;
            }

            .circle1 {
                background-color: rgba(0,0,0,0);
                border: 5px solid rgba(0,183,229,0.9);
                opacity: .9;
                border-left: 5px solid;
                border-right: 5px solid;
                border-radius: 50px;
                box-shadow: 0 0 15px #2187e7;
                width: 10px;
                height: 10px;
                margin: 0 auto;
                position: relative;
                top: -30px;
                animation: spinoffPulse 1s infinite linear;
                -webkit-animation: spinoffPulse 1s infinite linear;
            }

            @keyframes spinPulse {
                0% {
                    transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #2187e7;
                }
                50% {
                    transform: rotate(145deg);
                    opacity: 1;
                }
                100% {
                    transform: rotate(-320deg);
                    opacity: 0;
                }   
            }

            @keyframes spinoffPulse {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

            @-webkit-keyframes spinPulse {
                0% {
                    -webkit-transform: rotate(160deg);
                    opacity: 0;
                    box-shadow: 0 0 1px #2187e7;
                }
                50% {
                    -webkit-transform: rotate(145deg);
                    opacity: 1;
                }
                100% {
                    -webkit-transform: rotate(-320deg);
                    opacity: 0;
                }   
            }

            @-webkit-keyframes spinoffPulse {
                0% {
                    -webkit-transform: rotate(0deg);
                }

                100% {
                    -webkit-transform: rotate(360deg);
                }
            }       

            img.growturn {
                transition: width 2s, height 2s, transform 2s;
            }

            img.growturn:hover {
                width: 400px;
                height: 400px;
                transform: translate(-50%, -50%);
            }
        </style>
    </head>
    <body style="background:url(webdata/images/index/background.png) no-repeat; background-attachment: fixed; background-size:100% 100%;">
        <div id="left"></div>
        <div id="right"></div>
        <div id="top"></div>
        <div id="bottom"></div>

        <div class="center">
            <table class="button">
                <tr>
                    <td colspan="4">
                        /*this image (emblem.png) is the one causing problems*/
                        <img class="growturn" src="webdata/images/index/emblem.png" alt="" height="45" width="45" style="position: fixed; left:28%; top:6%">
                        <p style="font-family:'Lucida Sans Unicode', 'Lucida Grande', sans-serif; font-size: 15pt; color: white;">PROJECT <strong>COSC</strong>2206</p>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" style="font-family:Geneva, 'Book Antiqua', Palatino, serif; font-size: 40pt; color: orange">WELCOME TO MY WEBSITE</td>
                </tr>
                <tr>
                    <td colspan="4" style="font-family:Helvetica, sans-serif; font-size: 9pt; color:#C2F0FF; letter-spacing: 1px; padding: 20px">Welcome to Project COSC2206. All assignments can be viewed below once they become available or simply return to the iTool's.</td>
                </tr>
                <tr>
                    <td  style="background-color:#00CCFF;"><a href="#">tools</a></td>
                    <td style="background-color:#00CCFF;"><a href="classified.html">Assignment 2</a></td>
                    <td style="background-color:#00CCFF;"><a href="classified.html">Assignment 3</a></td>
                    <td style="background-color:#00CCFF;"><a href="classified.html">Assignment 4</a></td>
                </tr>
            </table>  
        </div>  



        <a href="http://validator.w3.org/check?uri=http%3A%2F%2Fcoscvm23.cs.laurentian.ca%2F;outline=1" target="_blank">
            <img src="webdata/images/index/HTML5_Badge.png" alt="" width="28" height="27" style="position: absolute; float: left; left: 7px; bottom: 5px;">
        </a>    
        <a href="http://jigsaw.w3.org/css-validator/check/referer" target="_blank">
            <img src="webdata/images/index/CSS3.png" alt="" width="31" height="31" style="position: absolute; float: left; left: 35px; bottom: 2px;">
        </a>

        <div class="bottomright">
            <div class="circle"></div>
            <div class="circle1"></div>
        </div>
    </body>
</html>

Answer 1

我没有看到任何问题。我检查了三个浏览器，chrome，firefox和Internet Explorer。但是这个问题可能是由于浏览器的CSS。你应该在CSS position属性的末尾使用!important，然后第二件事是尝试减少top left slighlty的百分比，这样它就不会因为边缘很小而错位。

使用html5和css为所有浏览器定位图像

1 个答案: