我有一个页面的以下 html 代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buy, Sell Anywhere!</title>
<?php
$bgimglist = array(
"1419761599136.jpg",
"123.jpg",
"6Edng.jpg",
"second-hand-smoke-2-390x285.jpg",
"AllSmoke.jpg",
"best-air-purifier-for-smoke.jpg",
"HTB1pZmkG.jpg",
"images.jpg",
"index.jpg",
"SmokerBearded.jpg",
"sygareta.jpg"
);
$bgimg = $bgimglist[array_rand($bgimglist)];
?>
<style type="text/css">
body {
background-image: url(images/<?php echo $bgimg;?>);
background-repeat:no-repeat;
background-size:cover;
}
</style>
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
</head>
<body>
<script language="JavaScript">
... removed...
</script>
<div id="top">
<div class="ad">
<?php include 'Ad728x90.inc';?>
</div>
<div id="TC">
<p>By using this site, you agree to the terms and conditions. You also agree that your government, local or national permits you to engage in activities relating to... <removed>...</p>
<p>You must be at least 18 years to use this site, regardless of your local laws. We do not encourage children to be associated in any way with this site.</p>
</div>
<div id="main">
我有以下 CSS:
.large {
font-size:30px;
}
body {
font-family:Arial, Helvetica, sans-serif;
}
#top {
font-size:300%;
font-weight:bold;
text-align:center;
padding:19px 0 6px 0;
}
.ad {
margin:auto;
padding:10px;
text-align:center;
}
.links a{
color:#FFF;
text-decoration:none!important;
}
#TC {
margin:auto;
width:90%;
height: 50px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
}
#main {
margin:auto;
width:90%;
height: 500px;
text-align:center;
font-size:12px;
background-color:#FFFFFF;
padding: 10px;
}
大部分 CSS 可能不相关，但为了完整起见，我将其包括在内。问题是 ID 为“TC”的 DIV 在使用 Firefox、Chrome 和 IE 的网络上似乎有底部填充；但不是在我的手机上使用 Chrome。事实上，一些文本被截断了，所以它看起来有负填充!
有点麻烦(也许这是一个不同的问题)是顶部的填充看起来比所有浏览器底部的填充大，但在 Firefox 中使用 Inspect Element，盒子模型显示底部和顶部的 10px 边框。
一如既往地感谢任何意见。
最佳答案
它在较小的屏幕上这样做是因为内容溢出了 #TC div，
您可以使该 div 更大，或者在您的 css 中使用 overflow: hidden 或 overfow-y: scroll。
出于演示目的，我包含了 overflow-y: scroll
#TC {
margin:auto;
width:90%;
height: 60px;
text-align:center;
font-size:12px;
background-color:#F0F0F0;
padding:12px;
overflow-y:scroll;
}
关于css - CSS 中的填充在网络与移动设备中不一致，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33590640/