Question

我正在尝试为我的网站创建一个占位符页面，但遇到了一些有关跨浏览器兼容性的问题。它在我的手机和iPad上的Chrome和我的移动iOS上运行得很好，但在IE或FireFox上却没有。我已经尝试了几种垂直对齐的方法，但似乎无法让它们中的任何一种正常工作。我是否缺少某些东西，或者有没有办法在所有浏览器中正确显示？非常感谢！

直播网站：http://www.radicalcreation.com

HTML：

<html>

    <head>

        <title>Radical Creation</title>

        <link rel="stylesheet" type="text/css" href="default.css"/>
        <link rel="shortcut icon" href= "images/favicon.png"/>
        <link rel="icon" href="images/favicon.png" type="image/x-icon">
        <!-- JavaScript Links -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript" src="jscript/s3Slider.js"></script>
<!--    <script type="text/javascript" src="/jscript/jquery-1.4.1.min.js"></script>
        <script type="text/javascript" src="/jscript/custom.js"></script> -->
        <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
        <script type='text/javascript' src='js/jquery.particleground.min.js'></script>
        <script type='text/javascript' src='js/demo.js'></script>

    </head>

    <body>



            <div class="title">
            <div class="main-title"><span class="thin">Radical</span>Creation</div>
            <h3>Coming Soon!</h3>
            </div>

        <div id="particles">
        </div>

    </body>

    </html>

CSS：

html {
    height: 100%;
    overflow:hidden;
}
body {
    font-family: ‘Lucida Console’, Monaco, monospace;
    background-repeat: none;
    background-size: cover;
    background-position: center;
    background-image: url(images/stars.jpg);
}

h2, h3 {
    font-weight: lighter;
    color: #4EB4FC;
    position: relative;
}


.title{
    margin-top: -100px;
    top: 54%;
    text-align: center;
    position: relative;
    float: center;
}

.main-title .thin {
    font-weight: 200;
}

.main-title {
    top:10px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 30px;
    color: #f9f1e9;
    font-family: 'Raleway', Calibri, Arial, sans-serif;
    transform : scale(1.0,0.8);
    -webkit-transform:scale(1.2,1.0); /* Safari and Chrome */
    -moz-transform:scale(1.0,0.8); /* Firefox */
    -ms-transform:scale(1.0,0.8); /* IE 9+ */
    -o-transform:scale(1.0,0.8); /* Opera */
}

#particles {
    top: -5px;
    height:100%;
    opacity: .6;
}

Answer 1

纯CSS解决方案：（要求.title具有设定的高度）

.title{
text-align: center;
width: 100%;
position: absolute;
top: 0%;
bottom: 0%;
height: 100px;
margin: auto;
}

见这里： https://jsfiddle.net/svArtist/cn5fb6ua/

Answer 2

垂直对齐总是很棘手，因为CSS中不支持它。您可以尝试使用this question或this one中的一些黑客，但如果它仍然不适合您，最简单的解决方案是使用javascript / jQuery。它会是这样的（再加上.title绝对定位）：

<script>
$(function () {
  $(window).on('resize', function () {
    var title = $('.title');
    var top = $(window).height() / 2 - title.outerHeight() / 2;
    $('.title').css('top', top + 'px');
  }).trigger('resize');
});
</script>

如果您不知道如何使用javascript / jQuery，只需将上面的代码粘贴到您的页面中（例如在head部分中），以及jQuery的导入： <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

中心文本垂直不在IE和Firefox中工作

2 个答案: