1
Chromeで
、FFとSafari（Windows用）の私のページはまったく同じになります。モバイルサファリでCSSが異なるのはなぜですか？
が、モバイルのSafari（iPhone 4）には、このようなものだ： 
私の問題はありますモバイルサファリページのフォントサイズの定義が不足しています。私のCSS /マークアップがどういうものなのか教えてください。
マークアップ：
<body>
<div id="container">
<div id="header"><h1><a href="./DDD Blog_files/DDD Blog.htm" title="back to home page">DDD blog<span class="hidden"> (home)</span></a></h1></div>
<div class="newPost controls"><a href="http://localhost:1906/posts/update">Post something new</a></div>
<div class="post">
<h2><a href="http://localhost:1906/posts/2/title-of-the-first-blog-post">Title Of The First Blog Post</a></h2><span class="datetime" title="2010-12-15 00:00:00Z">1 month ago</span>
<div class="controls"><a href="http://localhost:1906/posts/update/2">edit</a></div>
<div class="body mattyMarkup">
<p>A massive paragraph of text should represent a blog entry. Every line of this should add to the enormous example which I am trying to convey. Sometimes <a href="http://google.com/" title="http://google.com">links will dot</a> the post body landscape. Other times, <em>sweet-as</em> emphasis and punctuation will be required to communicate the message.</p>
<p>All in all, this is the end.</p>
</div>
<div class="comments">
<a class="summary" href="http://localhost:1906/posts/detail/2#newComment">add the first comment</a>
</div>
</div>
<div class="post">
<h2><a href="http://localhost:1906/posts/1/the-original-and-best---post-1">The Original and Best - Post #1</a></h2><span class="datetime" title="2010-10-07 00:00:00Z">4 months ago</span>
<div class="controls"><a href="http://localhost:1906/posts/update/1">edit</a></div>
<div class="body mattyMarkup">
<p>This text will be somewhat more brief than the post above, intended to denote a more recent thought. </p>
<p>I have some problems generating meaningful sentences to simply string together for sample text so this will be my second last sentence. This is the last.</p>
</div>
<div class="comments">
<a class="summary" href="http://localhost:1906/posts/detail/1#newComment">3 comments</a>
</div>
</div>
</div>
<div id="footer"></div>
</body>
CSS：
body {
margin: 0;
border-top: solid 5px #3B9AE6;
}
.hideOverflow { overflow: hidden; }
#container {
margin: 0 auto;
width: 40em;
padding: 0 1em;
}
.post {
background-color: #FFFFFF;
margin: 5em -1em;
padding: 1em 0;
}
.post h2 { margin-top: 0; float:left; }
.post span.datetime { margin: 0 1em; }
.post .body { clear: both; }
.post .comments a.summary { float: right; font-size:.9em; }
.post .controls { float: right; }
.updatePost form input[name], .updatePost form textarea[name] { width: 100%; }
.updatePost a.delete { float: right; margin-top: .25em; }
#footer { }
/*
Generics
*/
body {
color: #333; background-color: #fff;
line-height: 1.3em;
}
body, input, textarea { font: 14px "Lucida Sans",tahoma,sans-serif; }
h1, h2, h3, h4, h5, h6 { font-family: Georgia,serif; font-weight: normal; color: #377AB0; }
/* */
h1 { font-size: 2.5em; }
h2 { font-size: 1.8em; }
a, a:link { color: #3B9AE6; text-decoration: underline; }
a:hover, a:active, a:hover:visited , a:active :visited { color: #333; text-decoration: underline; }
a:visited { text-decoration: none; }
input.tip, textarea.tip { color: #aaa; }
form, fieldset { margin:0; padding:0; border:0; }
.infoBlock { margin: 1em 0; padding: 1em; background-color: #F2F9FD; }
/*
Specifics
*/
#header h1 { color: #D6D6D6; }
#header h1 span.hidden { color: #fff; }
#header h1 a { color: #D6D6D6; text-decoration: none; }
#header h1 a:hover { background-color: #D6D6D6; color: #fff; text-decoration: none; }
.post { margin: 4em 0; }
.post h2 a { color: #333; text-decoration: none; }
.post h2 a:hover, .post h2 a:active { color: #333; text-decoration: underline; }
.post span.datetime { color: #aaa; line-height: 1.8em; }
ol.comments {
list-style-type: none;
background-color: #F2F9FD;
margin: 2em 0;
padding: 1em;
}
ol.comments span.datetime { font-size: .9em; }
ol.comments span.name { color: #3B9AE6; }
.newComment {
border-top: dashed 1px #ccc;
margin: 2em 0;
padding: 1em;
}
.newComment form p { font-size: .9em; }
.updatePost input[name=title] { font-size: 1.2em; }
.updatePost a.back { margin: 0 1em; }
.controls a, .controls a:link, a.command, a.command:link { color: red; text-decoration: underline; }
.controls a:hover, .controls a:active, .controls a:hover:visited , .controls a:active :visited,
a.command:hover, a.command:active, a.command:hover:visited , a.command:active :visited{ color: #333; text-decoration: underline; }
.controls a:visited, a.command:visited { text-decoration: none; }
これはどのように動作するのか理解したいと思います。私は他の多くのサイト（上記の例のようなブログさえある）を見ているので、i4で全く同じものがレンダリングされます。彼らはあなたの言及の効果を元に戻すために特別な/追加の何かをしているのですか？ –
@cottsak：私の編集方法を参照してください。 – BoltClock