最近开始学习 CSS ，感觉入门容易，但是上手很麻烦，尤其是兼容性的问题，根本是两眼一摸黑。
在网上下载了一个简单的 PSD 博客模板，对照着这个模板开始练手，切图，写 html ，就着 firebug 添加 css 代码。
好不容易完成了首页，就发现了两个问题：
- 在 IE 下，导航链接貌似被居中的头像挤到下面去了；
- 文章标题上方的评论、点赞的小图标也不晓得怎么与文字对齐。
原有效果图：
出现的问题：
求解惑.....另外，我代码中如果有什么地方需要改进的也麻烦告知一下....谢谢！
html 代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Blog</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="wrap"> <div class="header"> <div class="top"> <img src="images/top.jpg"> </div> <div class="nav"> <ul> <li><a href="#" class="active">Home</a></li> <li><a href="#">Home</a></li> <li><img src="images/tx.png" alt="Something about Shawn"></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> </div> </div> <div class="inner"> <div class="subtitle"> <p>Hello everybody, Welcome to my Blog!</p> <span class="hr"></span> </div> <div class="content"> <div class="post"> <div class="date"> <span>21 Jul</span> </div> <div class="desc"> <span class="cat">cat : <a href="#">Diary</a> , <a href="#">Persional</a></span> <span class="likes">136 Likes</span> <span class="comments">21 Comments</span> </div> <div class="postcontent"> <h3><a href="#">First blog title here!</a></h3> <p>This is Photoshop's version of Learning the python. You can try mandy way to do this hard thing. The Beginner's Guide to SEO has been read over 3 million times and provides comprehensive information you need to get on the road to professional quality Search Engine Optimization.</p> <span class="readmore">Read More</span> </div> </div> <div class="post"> <div class="date"> <span>21 Jul</span> </div> <div class="desc"> <span class="cat">cat : <a href="#">Diary</a> , <a href="#">Persional</a></span> <span class="likes">136 Likes</span> <span class="comments">21 Comments</span> </div> <div class="postcontent"> <h3><a href="#">First blog title here!</a></h3> <p>This is Photoshop's version of Learning the python. You can try mandy way to do this hard thing. The Beginner's Guide to SEO has been read over 3 million times and provides comprehensive information you need to get on the road to professional quality Search Engine Optimization.</p> <span class="readmore">Read More</span> </div> </div> <div class="post"> <div class="date"> <span>21 Jul</span> </div> <div class="desc"> <span class="cat">cat : <a href="#">Diary</a> , <a href="#">Persional</a></span> <span class="likes">136 Likes</span> <span class="comments">21 Comments</span> </div> <div class="postcontent"> <h3><a href="#">First blog title here!</a></h3> <p>This is Photoshop's version of Learning the python. You can try mandy way to do this hard thing. The Beginner's Guide to SEO has been read over 3 million times and provides comprehensive information you need to get on the road to professional quality Search Engine Optimization.</p> <span class="readmore">Read More</span> </div> </div> <div class="post"> <div class="date"> <span>21 Jul</span> </div> <div class="desc"> <span class="cat">cat : <a href="#">Diary</a> , <a href="#">Persional</a></span> <span class="likes">136 Likes</span> <span class="comments">21 Comments</span> </div> <div class="postcontent"> <h3><a href="#">First blog title here!</a></h3> <p>aaThis is Photoshop's version of Learning the python. You can try mandy way to do this hard thing. The Beginner's Guide to SEO has been read over 3 million times and provides comprehensive information you need to get on the road to professional quality Search Engine Optimization.</p> <span class="readmore">Read More</span> </div> </div> </div> <div class="load_more"> <span>Load More</span> </div> <div class="footer"> <p>Copyrights (c) <a href="#">Fikristudios</a> 2016</p> </div> </div> </div> </body> </html> CSS 代码：
* { margin:0; padding:0; } body { font-size:14px; color:#bcbcbc; max-width: 1200px; width: 100%; margin:0 auto; background: #3eb3a5; } ul,ol { list-style-type:none; } a { text-decoration: none; color: #bcbcbc;} a:hover, a:active,.active { color:#3eb3a5; } .clearfix { clear:both; overflow: hidden; width: 100%; } .wrap { background-color: #fff; } .top { height: 350px; } .nav { height: 85px; border-bottom: 1px solid #dfdfdf; font-size: 24px; font-weight: bold; line-height: 85px; text-align: center; } .nav li { display: inline-block; } .nav li a { padding: 10px; margin-left: 10px; } .nav li a:hover, .nav li a:active, .active{ border-bottom: 5px solid #afafaf; } .nav img { vertical-align: top; position: relative; width: 220px; text-align: center; top: -93px; } .inner { margin:0 auto; width: 940px; } .subtitle { text-align: center; font-size: 14px; margin-top: 90px; padding-bottom: 30px; color: #a0a0a0; } .subtitle .hr { display: block; text-align: center; width: 32px; height: 3px; margin:10px auto 5px; border-top: 1px solid #a0a0a0; border-bottom: 1px solid #a0a0a0; } .date { display: block; width: 123px; height: 123px; background: url(images/date.png) no-repeat; font-size:24px; float: left; text-align: center; line-height: 123px; margin-right: 12px; } .date span { color: #3eb3a5; font-weight: bold; } .desc, .postcontent { margin-left: 140px; word-break: break-all; } .desc { padding-bottom: 16px; border-bottom: 1px solid #efefef; vertical-align: top; } .cat, .likes { border-right: 1px solid #ebebeb; padding-right: 20px } .likes { display: inline-block; padding-left: 40px; background: url(images/tb.png) no-repeat 16px -14px; } .comments { margin-left: 20px; padding-left: 20px; display: inline-block; background: url(images/tb.png) no-repeat 0 0 ; height: 14px; } .post { margin-top: 38px; background: url(images/line.png) repeat-x bottom; } .cat a { color:#3eb3a5; } .postcontent p{ line-height: 27px; } .postcontent h3 { font-size: 30px; line-height: 70px; } .postcontent h3 a { color: #272727; } .readmore { display: inline-block; font-size: 16px; font-weight: bold; color: #3eb3a5; margin-top: 24px; margin-bottom: 30px; padding: 5px 0; border-bottom: 1px solid #e1e1e1; } .load_more { background-color: #3eb3a5; text-align: center; color: #ffffff; height: 53px; width: 142px; border-radius: 5px; margin: 48px auto 108px; } .load_more span { font-size: 18px; font-weight: bold; text-align: center; line-height: 53px; } .footer { text-align: center; font-size: 18px; font-style: normal; padding-bottom: 48px; } .footer a { color: #3eb3a5; } 
Select Language