所以，让我直接说出我的问题。我正在开发一个网站。所以我尝试访问我正在用我的 iPhone 开发的这个网站。问题是，当我使用 PC 访问该站点时和使用 iPhone 访问该站点时，我得到了一些不同的输出。 This图像是当我使用我的 PC 的 Chrome 访问它时，输出与我 PC 中的所有其他浏览器相同，而 this是当我用我的 iphone 的 Safari 访问它时，所以当我用我的 iphone 的 Chrome 访问它时输出也是一样的。看到从 iphone 访问和从 PC 访问之间的区别了吗？是的。当我用我的 iPhone 访问它时，我在导航栏上方看到了那个“空间”。那么有人可以帮我解决这个问题吗？非常感谢。
顺便说一句，这是我的 CSS 和 HTML
body {
background: rgb(25, 181, 254);
margin: 0px;
font-family: "Trebuchet MS", Helvetica, sans-serif;
}
#header {
width: 100%;
min-width: 1050px;
height: 150px;
margin-bottom: 20px;
text-align: center;
}
#logoBox {
display: inline-block;
width: 300px;
height: 150px;
overflow: hidden;
}
#logoBox:active {
height: 140px;
margin: 5px auto;
}
.logo {
background: url('img/icon/logo.png') no-repeat;
width: 300px;
height: 100%;
}
#navBox {
width: 150px;
height: 150px;
overflow: hidden;
display: inline-block;
}
.transition {
transition: height 0.15s, margin 0.15s, background 0.7s;
-webkit-transition: height 0.15s, margin 0.15s, background 0.7s;
-o-transition: height 0.15s, margin 0.15s, background 0.7s;
-ms-transition: height 0.15s, margin 0.15s, background 0.7s;
-moz-transition: height 0.15s, margin 0.15s, background 0.7s;
}
#navBox:active {
height: 140px;
margin-bottom: 5px;
}
#navBox.green {
background: rgb(80, 190, 106);
}
#navBox.orange {
background: rgb(250, 170, 30);
}
#navBox.green:hover {
background: rgb(4, 160, 114);
}
#navBox.orange:hover {
background: rgb(240, 130, 20);
}
#iconBox {
height: 53.4%;
width: 100%;
margin-top: 13.4%;
text-align: center;
}
#iconBorder {
width: 70px;
height: 70px;
border-radius: 40px;
border: 5px solid rgb(255, 255, 255);
}
img.icon {
width: 50px;
height: 50px;
margin-top: 10px;
}
a.nav {
display: inline-block;
text-decoration: none;
}
#navProp {
width: 100%;
height: 33.3%;
color: rgb(255, 255, 255);
text-align: center;
font-weight: bold;
font-size: 25px;
margin-top: 6.7%;
}
.center{
margin-left:auto;
margin-right:auto;
}<html>
<head>
<title>Welcome to SIRIUS</title>
<?php require_once "theme.php"; ?>
</head>
<body>
<div id="header">
<a href="index.php" class="nav">
<div id="logoBox" class="transition">
<img src="img/icon/logo.png" class="logo">
</div>
</a>
<!--
-->
<a href="index.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon home">
</div>
</div>
<div id="navProp">Home</div>
</div>
</a>
<!--
-->
<a href="aboutUs.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon aboutUs">
</div>
</div>
<div id="navProp">About Us</div>
</div>
</a>
<!--
-->
<a href="register.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon register">
</div>
</div>
<div id="navProp">Register</div>
</div>
</a>
<!--
-->
<a href="login.php" class="nav">
<div id="navBox" class="orange transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon login">
</div>
</div>
<div id="navProp">Login</div>
</div>
</a>
<!--
-->
<a href="admin.php" class="nav">
<div id="navBox" class="green transition">
<div id="iconBox">
<div id="iconBorder" class="center nav">
<img src="img/x.gif" class="icon admin">
</div>
</div>
<div id="navProp">Admin</div>
</div>
</a>
</div>
</body>
</html>最佳答案
抱歉我看不到你的图片，因为工作阻止了内容:P
我在这里猜测，但很可能是浏览器指定的东西，你没有边距等。尝试使用 reset.css 文件或在桌面上使用调试 (F12) 并假装是电话调试。 (我很确定在 chrome 中你可以指定一个手机浏览器类型，我假设所有现代浏览器都有移动模拟)
或者可以是min-width: 1050px; 如果您正在设计此响应式设计，您可能需要进行一些@media 查询。
[edit] 我还注意到您没有指定 html。也许浏览器正在针对 html 标签添加一些 css？ html { margin :0;填充:0；
关于ios - iphone 上的 CSS 输出与 PC 不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26730370/