首页 注册 登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
• 请不要在回答技术问题时复制粘贴 AI 生成的内容
seoguess
V2EX  ›  程序员

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

  •   
  •   seoguess · 2016-07-12 21:21:20 +08:00 · 4837 次点击
    这是一个创建于 3398 天前的主题，其中的信息可能已经有所发展或是发生改变。

    最近开始学习 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;
}
    第 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;
    }
  • div
  • span
  • class
  • href
    25 条回复  •  2016-07-13 13:08:15 +08:00
    loading
        1
    loading  
       2016-07-12 21:47:19 +08:00 via Android
    也许你应该说一下你打算兼容到哪个版本的 ie 。
    seoguess
        2
    seoguess  
    OP
       2016-07-12 21:57:02 +08:00
    @loading I 谢谢提醒！ IE8 以上或者 10 以上都可以的，我知道 IE6 、 7 貌似比较复杂。

    也许像这么简单的网页稍微修改一下就可以基本正常显示了？
    BMW
        3
    BMW  
       2016-07-12 22:43:32 +08:00
    建议不考虑 ie10 以下版本
    seoguess
        4
    seoguess  
    OP
       2016-07-12 22:50:12 +08:00
    现有的代码在 firefox 与 chrome 中导航是正常的，就是小图标有点靠上。
    Losses
        5
    Losses  
       2016-07-12 22:56:08 +08:00
    不要考虑 ie10 以下了……对自己好一点……
    ChiangDi
        6
    ChiangDi  
       2016-07-12 22:59:38 +08:00
    初学 css 就不要考虑 IE 了，直接用 edge
    hard2reg
        7
    hard2reg  
       2016-07-12 23:04:23 +08:00
    原来 PSD 还能转网页啊！请问用的是什么工具？
    BearTher
        8
    BearTher  
       2016-07-12 23:12:10 +08:00
    ...过去刚开始学 css 的时候 从不考虑兼容性 也从不拿到别的浏览器里去跑 直接火狐一路刚

    图标单独定义边距试试
    seoguess
        9
    seoguess  
    OP
       2016-07-12 23:18:40 +08:00
    @hard2reg 额，不是工具，看着 PSD 效果图，然后手写代码.......
    seoguess
        10
    seoguess  
    OP
       2016-07-12 23:26:01 +08:00
    @BearTher 谢谢你啦，我是利用背景嵌套的图标，跟边距应该没关系的。

    兼容性早晚都会遇到，我是希望在刚学的时候遇到针对性的问题就解决掉，以后可以避免类似的错误。
    Mac
        11
    Mac  
       2016-07-12 23:37:23 +08:00
    这年头还有人和自己过不去想去兼容 IE...
    hard2reg
        12
    hard2reg  
       2016-07-13 00:04:42 +08:00
    @seoguess O__O "…
    bibizhang
        13
    bibizhang  
       2016-07-13 00:19:49 +08:00
    你还不到考虑兼容性的时候
    zoxobo
        14
    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
        15
    yeyeye  
       2016-07-13 01:48:16 +08:00
    @seoguess

    附带一句手写代码 马上就成新手菜鸟变成高大上的达人了 语言艺术 点赞
    seoguess
        16
    seoguess  
    OP
       2016-07-13 07:20:38 +08:00
    @zoxobo 非常感谢！看你还是用手机码的字，我设置好 line-height 就解决啦。
    @Mac IE 还是有很多的用户群的，尤其是很多单位里面还是用的 xp 系统。另外， 360 的内核貌似也是 IE.....

    @yeyeye 好吧，主要是我找不到其他的形容词。
    loading
        17
    loading  
       2016-07-13 07:51:02 +08:00 via Android
    就你用了 display: inline-block;

    还想兼容 xp 的 ie6?

    去查一下 ie 对 css2 的支持情况再说吧～
    jhaohai
        18
    jhaohai  
       2016-07-13 09:10:11 +08:00 via iPhone
    不要考虑 IE ，世界上只有三个浏览器 chrome ， firefox ， edge
    realpg
        19
    realpg  
    PRO
       2016-07-13 09:24:27 +08:00
    IE 直接让他故意非常差的不兼容 甚至额外做一些劣化 让 IE 完全无法正常使用
    我就是这么做的 顺便给个提示 请使用 chrome 搜狗 360 浏览器访问
    然后基本上那些 XP 用户都会切换成搜狗或者 360
    seoguess
        20
    seoguess  
    OP
       2016-07-13 09:38:30 +08:00
    @loading 因为刚接触这块，所以不太了解。我重新看了一下 css ，导航的错位跟 dispaly:inline-block;没有关系的。
    @jhaohai 我也想啊....
    @realpg 明白，这确实也是个方法。不过 360 的内核不也是 IE 的吗？
    davin
        21
    davin  
       2016-07-13 09:52:19 +08:00
    你这是有多爱 span ... 通篇的都是 span 。刚开始学，不建议做这么复杂的东西。可以先拆分成多个模块，比如图像布局、菜单横排、竖排布局、图文混排等等，然后把这些组合起来体会下。其次，了解下语义化，代码的复用 /耦合，以及为了团队配合， CSS 的命名规则和图像类型的命名规则（ ico_xxx / bg_xxx / btn_xxx ）... 这些看似不重要的内容。
    begoingtodo
        22
    begoingtodo  
       2016-07-13 10:24:08 +08:00
    兼容问题自己研究 http://www.w3school.com.cn/css/css_positioning.asp

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


    @begoingtodo @askaday 谢谢！
    wilddog
        25
    wilddog  
       2016-07-13 13:08:15 +08:00
    对自己好一点，放弃 IE 也不是不可以
    关于   ·   帮助文档   ·   自助推广系统   ·   博客   ·   API   ·   FAQ   ·   Solana   ·   936 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 19:24 · PVG 03:24 · LAX 12:24 · JFK 15:24
    ♥ Do have faith in what you're doing.