Question

我在创作期间只在firefox中测试过我的网站，我今天开始测试，我在chrome上尝试过，我意识到滑块不适合页面的底部，甚至在Firefox中，但没关系。基本上，页面底部有一个很大的间隙，Chrome中的滑块位于顶部。

我的网站： http://www2.cegep-rdl.qc.ca/apprentissage/arts/godbout,xavier/index.html

和我的HTML：

<!DOCTYPE HTML>
<html>
<head>
<title>Xavier Godbout</title>

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
    <body>
        <header>

        <div class="xavier"><div>

        <nav>
        <ul>
        <li><a href="#">PORTFOLIO</a></li>
        <li><a href="#">BIOGRAPHIE</a></li>
        <li><a href="http://www2.cegep-rdl.qc.ca/apprentissage/arts/godbout,xavier/fontzy/index.html">CONTACT</a></li>
        </ul>
        </nav>

        </header>


        <div class="banner">
            <ul>
                <li style="background-image: url('img/img1.jpg'); background-repeat: no-repeat;"></li>
                <li style="background-image: url('img/img2.jpg'); background-repeat: no-repeat;"></li>
                <li style="background-image: url('img/img1.jpg'); background-repeat: no-repeat;"></li>
            </ul>
        </div>


        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script src="js/unslider.min.js"></script>

        <script>
            $(function() {
                $('.banner').unslider({
                    speed: 500,              
                    delay: 5000,              
                    keys: false,               
                    dots: false,               
                    fluid: true,             
                });
            });
        </script>
    </body>
</html>

和我的CSS：

@charset "UTF-8";

@font-face {
    font-family: 'pier_sansregular';
    src: url('../font/pier-webfont.eot');
    src: url('../font/pier-webfont.eot?#iefix') format('embedded-opentype'),
         url('../font/pier-webfont.woff2') format('woff2'),
         url('../font/pier-webfont.woff') format('woff'),
         url('../font/pier-webfont.ttf') format('truetype'),
         url('../font/pier-webfont.svg#pier_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}

html {
    font-size: 62.5%;
    background-color: #fecb00;
}

body {
    padding:0px;
    margin: 0px;
}

header {
    height: 33vh;
    width: 100%;
    display: table;
    background-color: #fecb00;
}

.xavier {
    width: 36.6em;
    max-width: 100%;
    height: 12.2em;
    background: url(../img/xavier.svg) no-repeat 0px 0px;
    display: block;
    margin-top: 5%;
    margin-right: auto;
    margin-left: auto;
}

body header nav {
    padding-top: 40%;   
}

nav ul li {
    text-decoration: none;
    text-align: center;
    display: inline;
    padding-right: 1.5em;   
}

a:link {
    text-decoration: none;
    font-size: 1.5em;
    color: #000;
    font-family: pier_sansregular, sans-serif;
}

a:visited {
    text-decoration: none;
    font-size: 1.8em;
    color: #000;
    font-family: pier_sansregular, sans-serif;
}

.banner { 
    position: relative; 
    width: 100%;
    height: 67vh;
    overflow: auto; 
    padding: 0px;
    margin: 0px;
    display: table;
}
.banner ul {
    padding: 0px;
    margin: 0px;
}
.banner li { 
    list-style: none; 
    padding: 0px;
    margin: 0px;
}
.banner ul li { 
    float:left;
    padding: 0px;
    margin: 0px;
    min-height: 66.666vh;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;
    -ms-background-size: 100% auto;
    background-size: 100% auto;
    background-position-y: -75px;
}

那么，我该如何解决这个问题？

Answer 1

我在chrome和firefox中看了一下你的网站。两者看起来都一样。

关于跨浏览器兼容性，在CSS文件的开头执行CSS重置是一种很好的做法。

简单地复制＆amp;将此CSS粘贴到CSS文件的顶部。这将为每个元素设置默认设置，并提高跨浏览器的兼容性。

/*! normalize.css v3.0.2 | MIT License | git.io/normalize */ html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{font-size:2em;margin:.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=button],input[type=reset],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

Answer 2

<{1>}中的

，删除.banner ul li

background-position-y: -75px;

Firefox和Chrome之间的CSS定位问题

2 个答案: