在iPhone/iPad上查看时，网站上div之间的间距_Iphone_Html_Css

在iPhone/iPad上查看时，网站上div之间的间距

iphone html css

在iPhone/iPad上查看时，网站上div之间的间距,iphone,html,css,Iphone,Html,Css,在iPhone和iPad上浏览时，我很难让我的网站正确显示。webiste（甚至还没有完成）是 www.lzkconcepts.com 在我尝试过的每一款桌面浏览器（safari、chrome、firefox、IE）上都能正确显示该网站，但在iPhone/iPad上，“内容”div与页眉和页脚之间有一个很小的间隙/空间。我在页眉、内容和页脚div中使用背景图像来创建页面的轮廓。除了div之间的间隙之外，内容背景图像有时会稍微“收缩”，因此它不会与屏幕右侧的页眉和页脚对齐。如果我放大，一切都会完美

在iPhone和iPad上浏览时，我很难让我的网站正确显示。webiste（甚至还没有完成）是 www.lzkconcepts.com

在我尝试过的每一款桌面浏览器（safari、chrome、firefox、IE）上都能正确显示该网站，但在iPhone/iPad上，“内容”div与页眉和页脚之间有一个很小的间隙/空间。我在页眉、内容和页脚div中使用背景图像来创建页面的轮廓。除了div之间的间隙之外，内容背景图像有时会稍微“收缩”，因此它不会与屏幕右侧的页眉和页脚对齐。如果我放大，一切都会完美地排列起来。这是从iPhone上截取的屏幕截图

仔细观察蓝色导航栏下方的右侧

这是CSS（我知道它很粗糙，我只是在学习）

@charset“UTF-8”；
身体{
保证金：0；
填充：0；
颜色：#000；
字体系列：Arial、Helvetica、无衬线字体；
字体大小：100%；
线高：1.4；
背景色：#CCC；
}
.TableAppName{
颜色：#007EB4；
}
/*~~元素/标记选择器~~*/
ul、ol、dl{/*由于浏览器之间的差异，最好的做法是在列表上设置零填充和边距。为了保持一致性，您可以在此处指定所需的数量，也可以在列表项（LI、DT、DD）中指定所包含的数量。请记住，除非您编写了更具体的选择器，否则您在此处执行的操作将级联到.nav列表*/
填充：0；
保证金：0；
}
h1，h2，h3，h4，h5，h6，p{
页边距顶部：0；/*删除顶部页边距可以避免页边距可以从其包含的div中溢出的问题。剩余的底部页边距将使其远离后面的任何元素*/
右侧填充：15px；
左填充：15px；/*将填充添加到div中元素的侧面，而不是div本身，可以消除任何框模型数学。带侧面填充的嵌套div也可以用作替代方法*/
}
img{/*当图像被链接包围时，此选择器将删除某些浏览器中显示的图像周围的默认蓝色边框*/
边界：无；
}
/*~~站点链接的样式必须保持此顺序-包括创建悬停效果的选择器组。~~*/
a:链接{
颜色：#42413C；
文本装饰：下划线；/*除非您将链接的样式设置为非常独特，否则最好提供下划线，以便快速进行视觉识别*/
}
a:参观了{
颜色：#6E6C64；
文字装饰：下划线；
}
#导航条{
字体大小：95%；
背景色：#CCC；
背景图片：url（images/navblue.png）；
背景重复：无重复；
文本对齐：右对齐；
右边填充：20px；
颜色：#FFF；
高度：39px；
填充顶部：6px；
}
a:hover，a:active，a:focus{/*这组选择器将为键盘导航器提供与使用鼠标的人相同的悬停体验*/
文字装饰：无；
}
/*~~这个固定宽度的容器包围了其他div~*/
.集装箱{
宽度：874px；/*侧面的自动值与宽度一起使布局居中*/
边际上限：0；
右边距：自动；
页边距底部：0；
左边距：自动；
背景色：#CCC；
}
/*~~标题没有指定宽度。它将扩展布局的整个宽度。它包含一个图像占位符，该占位符应替换为您自己的链接徽标~*/
.标题{
背景色：#CCC；
背景图片：url（images/bannerFadedBlueandRangeText.png）；
背景重复：无重复；
身高：165px；
}
/*~~这是布局信息。~~
1） 填充仅放置在div的顶部和/或底部。此div中的元素在其侧面具有填充。这可以避免任何“盒子模型数学”。请记住，如果向div本身添加任何边距或边框，它将添加到定义的宽度中，以创建*总*宽度。您也可以选择删除div中元素上的填充，并在其中放置第二个div，该div没有设计所需的宽度和填充。
*/
.内容{
背景色：#CCC；
背景图片：url（images/contentfadedark4.png）；
背景重复：重复-y；
左侧填充：15px；
}
.contentBottom{
填充：0px；
边际：0px；
}
/*~~页脚~~*/
.页脚{
背景色：#CCC；
背景图片：url（images/footerfadedark.png）；
背景重复：无重复；
文本对齐：右对齐；
字号：80%；
}
/*~~其他浮动/清除类~~*/
.fltrt{/*此类可用于在页面中浮动元素。浮动元素必须位于页面上它应该位于旁边的元素之前*/
浮动：对；
左边距：8px；
}
.fltlft{/*此类可用于浮动页面中剩余的元素。浮动的元素必须位于页面上它应该位于旁边的元素之前*/
浮动：左；
右边距：8px；
}
.clearfloat{/*如果#footer被移除或从#容器中取出，则此类可以放置在
或空div上，作为最后一个浮动div（在#容器中）后面的最后一个元素*/
明确：两者皆有；
身高：0；
字号：1px；
线高：0px；
}
#h-navbar a，#h-navbar a:已访问{
文字装饰：无；
颜色：#FFF；
}
#h-navbar a:悬停{
颜色：#ea6828；
}
.页脚p{
颜色：#0075A7；
}
.内容h1{
颜色：#0074A9；
字体大小：正常；
字体大小：200%；
字体风格：普通；
填充顶部：15px；
左侧填充：23px；
}
.灰色文本{
颜色：#333；
}

这是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"><!-- InstanceBegin template="/Templates/LZKConcepts_Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>LZK Concepts</title>
<!-- InstanceEndEditable -->
<link href="LZKConcepts_styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>

<div class="container">
  <div class="header"><!-- end .header --></div>
  <div id="h-navbar"><a href="index.html"> Home </a> | <a href="#"> QuickGrader </a> | <a href="#"> Wish On A Star </a> | <a href="AboutUs.html"> About Us </a> | <a href="#"> Contact Us </a></div>
  <!-- InstanceBeginEditable name="MainContent" -->
  <div class="content">
    <h1>
      <!-- end .content -->
    iPhone Apps</h1>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/QuickGraderIconReflected140.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">QuickGrader</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="127" valign="top" class="graytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
        <a href="http://itunes.apple.com/app/quickgrader/id392532471?mt=8" target="_new"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" vspace="0" align="right" /></a></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/Wish On A Star Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">Wish On A Star</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
          <a href="http://itunes.apple.com/app/wish-on-a-star/id366753945?mt=8" target="_blank"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></a></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/Wish On A Star Free Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">Wish On A Star Free</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
          <a href="http://itunes.apple.com/app/wish-on-a-star-free/id388860624?mt=8"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></a></td>
      </tr>
    </table>
  </div>
  <!-- InstanceEndEditable -->
  <div class="footer">
    <p><br />
<br />
      <br />
    Copyright © 2010, LZK Concepts. All rights reserved.</p>
</div>
  <!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>


LZK概念
|  |  |  | 
iPhone应用程序
快速平地机
Lorem ipsum dolor sit amet，是一位杰出的献身者。Mauris neque quam，临时设施，临时设施。莫里斯·厄罗斯·拉库斯（Mauris eros lacus）、费尔吉亚（commodo ut feugiat vel）、索利西图丁（sollicitudin）和精英（elit）。Lorem ipsum dolor sit amet，是一位杰出的献身者。库拉比图尔·乌尔纳·迪亚姆（Curabitur urna diam），他是一个普通的分子，他是一个非腔隙的群体。


<!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"><!-- InstanceBegin template="/Templates/LZKConcepts_Template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>LZK Concepts</title>
<!-- InstanceEndEditable -->
<link href="LZKConcepts_styles.css" rel="stylesheet" type="text/css" />
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>

<body>

<div class="container">
  <div class="header"><!-- end .header --></div>
  <div id="h-navbar"><a href="index.html"> Home </a> | <a href="#"> QuickGrader </a> | <a href="#"> Wish On A Star </a> | <a href="AboutUs.html"> About Us </a> | <a href="#"> Contact Us </a></div>
  <!-- InstanceBeginEditable name="MainContent" -->
  <div class="content">
    <h1>
      <!-- end .content -->
    iPhone Apps</h1>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/QuickGraderIconReflected140.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">QuickGrader</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="127" valign="top" class="graytext">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
        <a href="http://itunes.apple.com/app/quickgrader/id392532471?mt=8" target="_new"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" vspace="0" align="right" /></a></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/Wish On A Star Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">Wish On A Star</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
          <a href="http://itunes.apple.com/app/wish-on-a-star/id366753945?mt=8" target="_blank"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></a></td>
      </tr>
    </table>
    <p>&nbsp;</p>
    <table width="844" border="0">
      <tr>
        <td width="160" rowspan="2" valign="top"><a href="#"><img src="images/Wish On A Star Free Reflected.png" alt="QuickGrader" width="120" height="154" hspace="20" /></a></td>
        <td width="482" class="TableAppName">Wish On A Star Free</td>
        <td width="188">&nbsp;</td>
      </tr>
      <tr>
        <td height="130" valign="top">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris neque quam, facilisis sed iaculis tempor, iaculis vitae purus. Mauris eros lacus, commodo ut feugiat vel, sollicitudin et elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur urna diam, iaculis ut commodo molestie, congue non lacus. </td>
        <td align="right" valign="top"><br />
          <a href="http://itunes.apple.com/app/wish-on-a-star-free/id388860624?mt=8"><img src="images/App_Store_Badge.png" alt="AppStore" width="155" height="54" hspace="18" align="right" /></a></td>
      </tr>
    </table>
  </div>
  <!-- InstanceEndEditable -->
  <div class="footer">
    <p><br />
<br />
      <br />
    Copyright © 2010, LZK Concepts. All rights reserved.</p>
</div>
  <!-- end .container --></div>
</body>
<!-- InstanceEnd --></html>

meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"