初学 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;
}
4132 次点击
所在节点    程序员
25 条回复
loading
2016-07-12 21:47:19 +08:00
也许你应该说一下你打算兼容到哪个版本的 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
但说.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
就你用了 display: inline-block;

还想兼容 xp 的 ie6?

去查一下 ie 对 css2 的支持情况再说吧～
jhaohai
2016-07-13 09:10:11 +08:00
不要考虑 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 的吗？

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

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

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

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

© 2021 V2EX