初学 CSS， PSD 转网页时发现 IE 下错位....

2016-07-12 21:21:20 +08:00
 seoguess

最近开始学习 CSS ，感觉入门容易，但是上手很麻烦，尤其是兼容性的问题，根本是两眼一摸黑。

在网上下载了一个简单的 PSD 博客模板，对照着这个模板开始练手，切图，写 html ，就着 firebug 添加 css 代码。

好不容易完成了首页，就发现了两个问题：

  1. 在 IE 下，导航链接貌似被居中的头像挤到下面去了；
  2. 文章标题上方的评论、点赞的小图标也不晓得怎么与文字对齐。

原有效果图：

出现的问题：

求解惑.....另外，我代码中如果有什么地方需要改进的也麻烦告知一下....谢谢！

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&nbsp;:&nbsp;<a href="#">Diary</a>&nbsp;,&nbsp;<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&nbsp;:&nbsp;<a href="#">Diary</a>&nbsp;,&nbsp;<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&nbsp;:&nbsp;<a href="#">Diary</a>&nbsp;,&nbsp;<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&nbsp;:&nbsp;<a href="#">Diary</a>&nbsp;,&nbsp;<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;
}
4353 次点击
所在节点    程序员
25 条回复
davin
2016-07-13 09:52:19 +08:00
你这是有多爱 span ... 通篇的都是 span 。刚开始学，不建议做这么复杂的东西。可以先拆分成多个模块，比如图像布局、菜单横排、竖排布局、图文混排等等，然后把这些组合起来体会下。其次，了解下语义化，代码的复用 /耦合，以及为了团队配合， CSS 的命名规则和图像类型的命名规则（ ico_xxx / bg_xxx / btn_xxx ）... 这些看似不重要的内容。
begoingtodo
2016-07-13 10:24:08 +08:00
兼容问题自己研究 http://www.w3school.com.cn/css/css_positioning.asp

图标问题可以考虑 background-position-y: center;
askaday
2016-07-13 10:29:42 +08:00
.nav img{vertical-align:-170px;}
seoguess
2016-07-13 13:04:54 +08:00
@davin 好的，谢谢你的建议。之所以使用 span 是因为我不想要把同一行的内容放在 div 中，之前我有跟着网上的一些教程做过多个模块的代码，这次也是第一次尝试弄一整个网页。文件命名的时候我确实是想到什么就放什么，后面是得注意一下啦。


@begoingtodo @askaday 谢谢！
wilddog
2016-07-13 13:08:15 +08:00
对自己好一点，放弃 IE 也不是不可以

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/292063

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX