l***@163.com
l***@163.com
  • 发布:2016-09-07 17:34
  • 更新:2016-09-07 17:55
  • 阅读:1866

Chrome显示效果和HBuilder的显示不一样

分类:HBuilder

我在Chrome 检查下的效果是好的,但是在HBuilder里面的边看边改里面,布局被打乱了。请问有什么好的解决办法吗?

样子如下:

2016-09-07 17:34 负责人:无 分享
已邀请:
Trust

Trust - 少说废话

web浏览器下有个设置的按钮,调整下分辨率。
或者在html中添加meta节点。

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
  • l***@163.com (作者)

    谢谢回复,但是我已经加了,还是不对呢

    2016-09-07 17:54

l***@163.com

l***@163.com (作者)

这个页面的代码如下,麻烦客服能帮我看一下吗? 除了img这就是全部的页面了。 谢谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  

    <head>  
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
        <title>航班详情</title>  
        <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">  
        <style>  
            html,  
            body {  
                background-color: #fff;  
                font-size: 10px;  
                font-family: "微软雅黑";  
            }  

            .head_top {  
                position: fixed;  
                height: 210px;  
                width: 100%;  
                background-image: url(img/bg2.png);  
                background-size: cover;  
                margin: 0 auto;  
                left: 0px;  
                right: 0px;  
                top: 0px;  
                text-align: center;  
                color: #fff;  
                font-size: 4.8rem;  
            }  

            .fanhui {  
                position: fixed;  
                height: 56px;  
                width: 160px;  
                left: 31px;  
                color: #fff;  
                font-size: 4.8rem;  
                top: 106px;  
            }  

            .huise {  
                position: fixed;  
                height: 249px;  
                width: 100%;  
                left: 0px;  
                right: 0px;  
                top: 0px;  
                background-color: #f6f5fa;  
                border-bottom: 1px solid #e6e5ea;  
                z-index: -9;  
            }  

            .radius {  
                border: 1px solid #e6e5ea;  
                border-radius: 12px;  
                -webkit-border-radius: 12px;  
                -moz-border-radius: 12px;  
            }  

            img {  
                border: none;  
            }  

            .zhengwen {  
                position: absolute;  
                height: 100px;  
                margin: 0 auto;  
                top: 249px;  
                left: 1px;  
                right: 0px;  
                color: #6a94e1;  
                z-index: -99;  
            }  

            .zhengwen tr td {  
                height: 150px;  
                border-bottom: 1px solid #e6e5ea;  
            }  

            .dibu {  
                position: fixed;  
                bottom: 0px;  
                left: 0px;  
                right: 0px;  
                height: 150px;  
                width: 100%;  
                background-color: #f6f5fa;  
                z-index: 20;  
                border-top: solid 1px #e6e5ea;  
                font-size: 3rem;  
                color: #a6a5aa;  
                line-height: 48px;  
            }  

            .zuodq {  
                padding-left: 84px;  
            }  

            .youdq {  
                padding-right: 84px;  
            }  

            .mid {  
                text-align: center;  
            }  

            .gg {  
                line-height: 150px;  
                font-size: 3.7rem;  
            }  

            .jihua {  
                position: absolute;  
                background-color: #6a94e1;  
                width: 167px;  
                height: 66px;  
                font-size: 3.4rem;  
                line-height: 58px;  
                color: #fff;  
                text-align: center;  
                right: 84px;  
                top: 186px;  
                border: none !important;  
                padding-top: 10px;  
            }  

            .bgdiv {  
                position: absolute;  
                background-color: #6a94e1;  
                width: 332px;  
                height: 186px;  
                font-size: 3.4rem;  
                line-height: 58px;  
                color: #fff;  
                text-align: center;  
                top: 452px;  
                border: none !important;  
            }  

            .bgdiv1 {  
                left: 84px;  
            }  

            .bgdiv2 {  
                right: 84px;  
            }  

            .jcwz {  
                padding-top: 30px;  
            }  

            .sanfenlan {  
                height: 100%;  
                width: 100%;  
                background-color: #f6f5fa;  
                margin: 0 auto;  
                border: none;  
            }  

            .sflwz {  
                text-align: center;  
                font-size: 3.6rem;  
                color: #6a94e1;  
                padding-top: 35px;  
                line-height: 58px;  
            }  
        </style>  
    </head>  

    <body>  
        <div class="head_top">  
            <div style=" padding:106px 0 48px 0;">航班详情</div>  
        </div>  
        <a href="index.html">  
            <div class="fanhui"><img src="img/zjt.png" width="31" height="56" style="margin-bottom:-10px;" /> 返回</div>  
        </a>  
        <div class="huise"></div>  

        <div class="zhengwen">  
            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                <tr>  
                    <td width="50%" class="zuodq gg"><span style="font-weight:bolder;">SC4728 </span>山东航空</td>  
                    <td width="50%" align="right" class="youdq gg">准点率:26.67%</td>  
                </tr>  
                <tr>  
                    <td class="zuodq gg">日期:2016-08-29</td>  
                    <td align="right" class="gg" style="padding-right:251px; ">状态:  
                        <div class="jihua radius">计划</div>  
                    </td>  
                </tr>  
                <tr>  
                    <td class="mid gg" style="color:#b6b5ba; border-right:1px solid #e6e5ea; border-bottom:none;">始发地</td>  
                    <td class="mid gg" style="color:#b6b5ba; border-bottom:none;s">目的地</td>  
                </tr>  
            </table>  

            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                <tr>  
                    <td>  
                        <div class="bgdiv bgdiv1 radius">  
                            <div class="jcwz">KWL<br/>两江国际机场</div>  
                        </div>  
                    </td>  
                    <td align="center" valign="middle" style="height:185px !important; border-bottom:none;"><img src="img/to.png" width="77" height="146" /></td>  
                    <td>  
                        <div class="bgdiv bgdiv2 radius">  
                            <div class="jcwz">KWL<br/>烟台蓬莱国际机场</div>  
                        </div>  
                    </td>  
                </tr>  
            </table>  

            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                <tr>  
                    <td align="center" width="50%" valign="middle" style="height:240px; border-right:1px solid #e6e5ea;"><img src="img/3001.png" width="126" height="156" /></td>  
                    <td align="center" valign="middle"><img src="img/30002.png" width="104" height="155" /></td>  
                </tr>  
                <tr>  
                    <td class="zuodq gg" style="border-right:1px solid #e6e5ea;">计划起飞时间:12:00</td>  
                    <td align="right" class="youdq gg">计划到达时间:13:50</td>  
                </tr>  
                <tr>  
                    <td class="zuodq gg" style="border-right:1px solid #e6e5ea;">实际起飞时间:12:00</td>  
                    <td align="right" class="youdq gg">实际到达时间:13:49</td>  
                </tr>  
            </table>  

            <table width="93%" border="0" cellspacing="50px" cellpadding="0" style=" margin-left:34px; margin-right:34px;">  
                <tr>  
                    <td width="33%" style=" height:186px; border:none;">  
                        <div class="sanfenlan radius">  
                            <div class="sflwz">26<br/>登机口</div>  
                        </div>  
                    </td>  
                    <td width="34%" style="  border:none;">  
                        <div class="sanfenlan radius">  
                            <div class="sflwz">C岛01-32<br/>值机柜台</div>  
                        </div>  
                    </td>  
                    <td width="33%" style="  border:none;">  
                        <div class="sanfenlan radius ">  
                            <div class="sflwz">11<br/>行李闸口</div>  
                        </div>  
                    </td>  
                </tr>  

            </table>  

            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                <tr>  
                    <td style="border-top:1px solid #e6e5ea; height:400px;">&nbsp;</td>  
                </tr>  
            </table>  

        </div>  

        <div class="dibu">  
            <table width="100%" border="0" cellspacing="0" cellpadding="0">  
                <tr>  
                    <td width="25%" height="91" align="center" valign="bottom"><img src="img/00001.png" width="77" height="72" /></td>  
                    <td width="25%" align="center" valign="bottom"><img src="img/100002.png" width="86" height="68" /></td>  
                    <td width="25%" align="center" valign="bottom"><img src="img/100003.png" width="79" height="70" /></td>  
                    <td width="25%" align="center" valign="bottom"><img src="img/100004.png" width="70" height="72" /></td>  
                </tr>  
                <tr>  
                    <td align="center" style="color:#6a94e1;">首页</td>  
                    <td align="center">消息</td>  
                    <td align="center">交友</td>  
                    <td align="center">我</td>  
                </tr>  
            </table>  

        </div>  

    </body>  

</html>
  • Trust

    给出的代码,在chrome手机模式下预览同样是乱的。

    2016-09-07 18:10

该问题目前已经被锁定, 无法添加新回复