填充在CSS中的Web与移动

不一致我有一个页面下面的html代码：填充在CSS中的Web与移动

<!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时，Box Model会为底部和顶部显示10px边框。

任何输入都会像往常一样受到欢迎。

来源

2015-11-08 Chiwda

请提供的jsfiddle。 – Alex

它这样做，在小屏幕上，因为内容溢出#TC 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

来源

2015-11-08 04:21:21

很简单！多谢！ – Chiwda

没问题！我很高兴它适合你。 –

填充在CSS中的Web与移动

回答

相关问题