Question

我有一个页面的以下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＆＃34; TC＆＃34;的DIV。似乎在网络上使用Firefox，Chrome和IE进行了底部填充;但不是在我的手机上使用Chrome。事实上，有些文字是截止的，所以看起来有一个负面的填充！

稍微麻烦（也许这是一个不同的问题）是顶部的填充看起来比所有浏览器底部的填充更大，但是在Firefox中使用Inspect Element，Box Model显示了10px的底部和顶部边框。

任何输入一如既往地受到赞赏。

Answer 1

它在较小的屏幕上执行此操作，因为内容溢出#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;
 }

CODEPEN DEMO

CSS中的填充在Web与移动中不一致

1 个答案: