Question

我有一个标题部分和一个后续的导航部分，导航部分在高度上显示正在开发的内容（MacBook Pro Retina）然而当我尝试在Windows机器上查看该网站时（两者都是镀铬的）视线高度完全不同，我尝试取出行高属性，但没有帮助： Display on the Mac in Chrome

Display on windows Chrome

CSS：

.nav {
    text-decoration: none;
    text-shadow: 
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
}

.nav li {
    text-transform: lowercase;
    font-size: 40px;
    display: inline-block;
}

.nav a { color: rgba(255,255,255,.55); transition: .3s ease; -webkit-transition: .3s ease;} .nav a:hover { color: white; text-decoration: none; text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
} 
.nav-white { color: white !important; text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 10px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
         /*text-shadow: 0px 0px 6px rgba(255,255,255,0.7);*/
}

.header-text {
    display: table;
    margin: 0 auto;
    padding-top: 150px;
    text-align: center;
/*  border-bottom: 5px solid white; underline that header!*/
    padding-bottom: 10px;
    text-shadow: 0px 3px 0px #b2a98f,
             0px 14px 10px rgba(0,0,0,0.15),
             0px 18px 4px rgba(0,0,0,0.1),
             0px 34px 30px rgba(0,0,0,0.1);
}


.header-img {
    width: 100%;
    height: 420px;
    background-color: #FE5B35;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    position: relative;
    -moz-box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
    box-shadow: inset 0 0px 10px rgba(0,0,0,.2);
}

我不确定是否与mac的像素密度有关，但过去开发时我没有遇到这样的问题;事情在过去相当不错修改有一个类似的帖子here表示它与文本阴影有关，它是通过改变字体解决的，我不想改变字体。有工作吗？

HTML：

<span class='header-text'>EVERYTHING ROB</span>
                    <div class='nav'>
                        <ul>
                            <li><a href='portfolio/' class='portfolio-nav'>Portfolio</a></li>
                            <li><a href="code-snippets" class='code-snippets-nav'>Code Snippets</a></li>
                            <li><a href="contact-me" class='contact-me-nav'>Contact</a></li>
                        </ul>
                    </div>

Answer 1

您是否尝试使用CSS重置？这可确保大小和间距始终与浏览器无关。查看更多：About CSS Reset

将它放在所有CSS代码之前：

* {
   margin:0;
   padding:0;
   border: 0;
   list-style:none;
   vertical-align:baseline;
   line-height: 1;
}

在浏览器上以不同方式表示行高

1 个答案: