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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 3055 天前的主题，其中的信息可能已经有所发展或是发生改变。

最近开始学习 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&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;
}

第 1 条附言 · 2016-07-12 23:01:38 +08:00

兼容 IE 10 及以上即可，我主要是想知道导航菜单错误究具体应该怎么修改。

作为背景图片的小图标，应该如何调整才能让它跟文字对齐....

谢谢啦～

第 2 条附言 · 2016-07-13 13:10:21 +08:00

问题已经解决，谢谢各位的帮助与回复！

导航问题：

设置导航 ul 的宽度，并让它居中显示； li 设置为向左浮动，然后给下方的.subtitile 添加 clear:both 属性。

.nav ul {
width: 640px;
margin:0 auto;
}
.nav li {
/*display: inline-block;*/
float: left;
}

.subtitle {
text-align: center;
font-size: 14px;
margin-top: 90px;
padding-bottom: 30px;
color: #a0a0a0;
clear: both;
}

图标对齐：

设置高度与行高都为 14px ，这样子就对齐了。

.cat, .likes, .comments {
height: 14px;
line-height: 14px;
}

25 条回复 • 2016-07-13 13:08:15 +08:00

loading

2016-07-12 21:47:19 +08:00 via Android

也许你应该说一下你打算兼容到哪个版本的 ie 。

seoguess

2016-07-12 21:57:02 +08:00

@loading I 谢谢提醒！ IE8 以上或者 10 以上都可以的，我知道 IE6 、 7 貌似比较复杂。

也许像这么简单的网页稍微修改一下就可以基本正常显示了？

BMW

2016-07-12 22:43:32 +08:00

建议不考虑 ie10 以下版本

seoguess

2016-07-12 22:50:12 +08:00

现有的代码在 firefox 与 chrome 中导航是正常的，就是小图标有点靠上。

Losses

2016-07-12 22:56:08 +08:00

不要考虑 ie10 以下了……对自己好一点……

ChiangDi

2016-07-12 22:59:38 +08:00

初学 css 就不要考虑 IE 了，直接用 edge

hard2reg

2016-07-12 23:04:23 +08:00

原来 PSD 还能转网页啊！请问用的是什么工具？

BearTher

2016-07-12 23:12:10 +08:00

...过去刚开始学 css 的时候从不考虑兼容性也从不拿到别的浏览器里去跑直接火狐一路刚

图标单独定义边距试试

seoguess

2016-07-12 23:18:40 +08:00

@hard2reg 额，不是工具，看着 PSD 效果图，然后手写代码.......

seoguess

2016-07-12 23:26:01 +08:00

@BearTher 谢谢你啦，我是利用背景嵌套的图标，跟边距应该没关系的。

兼容性早晚都会遇到，我是希望在刚学的时候遇到针对性的问题就解决掉，以后可以避免类似的错误。

Mac

2016-07-12 23:37:23 +08:00

这年头还有人和自己过不去想去兼容 IE...

hard2reg

2016-07-13 00:04:42 +08:00

@seoguess O__O "…

bibizhang

2016-07-13 00:19:49 +08:00

你还不到考虑兼容性的时候

zoxobo

2016-07-13 01:02:28 +08:00 via Android

但说.links ，调整图标和文字平行对齐
1:可以调整图片嵌套的坐标点
background: url(images/tb.png) no-repeat 16px -14px;这里的 16px 和-14px 修改大小试试，目的是让图片向下一点。
2:修改文字行高试试，目的向上移动文字

yeyeye

2016-07-13 01:48:16 +08:00

@seoguess

附带一句手写代码马上就成新手菜鸟变成高大上的达人了语言艺术点赞

seoguess

2016-07-13 07:20:38 +08:00

@zoxobo 非常感谢！看你还是用手机码的字，我设置好 line-height 就解决啦。
@Mac IE 还是有很多的用户群的，尤其是很多单位里面还是用的 xp 系统。另外， 360 的内核貌似也是 IE.....

@yeyeye 好吧，主要是我找不到其他的形容词。

loading

2016-07-13 07:51:02 +08:00 via Android

就你用了 display: inline-block;

还想兼容 xp 的 ie6?

去查一下 ie 对 css2 的支持情况再说吧～

jhaohai

2016-07-13 09:10:11 +08:00 via iPhone

不要考虑 IE ，世界上只有三个浏览器 chrome ， firefox ， edge

realpg

2016-07-13 09:24:27 +08:00

IE 直接让他故意非常差的不兼容甚至额外做一些劣化让 IE 完全无法正常使用
我就是这么做的顺便给个提示请使用 chrome 搜狗 360 浏览器访问
然后基本上那些 XP 用户都会切换成搜狗或者 360

seoguess

2016-07-13 09:38:30 +08:00

@loading 因为刚接触这块，所以不太了解。我重新看了一下 css ，导航的错位跟 dispaly:inline-block;没有关系的。
@jhaohai 我也想啊....
@realpg 明白，这确实也是个方法。不过 360 的内核不也是 IE 的吗？

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 也不是不可以