V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
seoguess
V2EX  ›  程序员

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

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

    最近开始学习 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;
    }
    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  
       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   ·   我们的愿景   ·   实用小工具   ·   1131 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 18:40 · PVG 02:40 · LAX 11:40 · JFK 14:40
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.