做了个登录页,开始底部有空白,加了个js高度控制,后来问题是在兼容模式下图片各种错位,求高手帮忙解决啊,我初学不太熟练,或者帮我改成div+css的,谢谢各位,急用非兼容模式是这样:
显示正常
兼容模式下就成了这样子:下面是代码:----------------------分割线-------------------------------------
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="login.aspx.cs" Inherits="LOGIN.login" %><!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="<%=CssPath%>base.css" rel="stylesheet" type="text/css" />
    <link href="<%=HwuiPath%>themes/blue/css/hwui-all.css" rel="stylesheet" />
    <script src="<%=JSPath%>jquery-1.7.2.min.js"></script>
    <script src="<%=HwuiPath%>hwui.min.js"></script>
    <title>登录页</title>
    <style type="text/css">
        .userInfo
        {
            color: #275a79;
            font-size: 12px;
        }        .banquan
        {
            color: #275a79;
            height: 30px;
            font-size: 12px;
        }        .user
        {
            width: 130px;
            height: 18px;
            border: solid 1px #62a5d9;
            font-size: 12px;
            color: #275a79;
            line-height: 18px;
        }
        .top
        {
            background-color: #cee6f5;
        }        .down
        {
            background-color: #62a5d9;
        }        .ler
        {
            height: 608px;            
        }
        body
        {
            margin: 0px;
            overflow: hidden;
            height: 640px;
        }
        #tabid
        {
            height: 640px;
        }      
    </style>
</head>
<body>
    <form id="form1" width="120%" height="120%" style="margin:0px;" runat="server" autocomplete="off">
        <table id="tabid" width="100%" border="0" cellpadding="0" cellspacing="0" >
            <tr>
                <td class="top">&nbsp;</td>
            </tr>
            <tr>
                <td class="ler" background="<%=ImagePath%>login_03.gif">
                    <table width="862" border="0" align="center" cellpadding="0" cellspacing="0" >
                        <tr>
                            <td height="266" background="<%=ImagePath%>login_04.gif">&nbsp;</td>
                        </tr>
                        <tr>
                            <td height="95">
                                <table width="100%"  style="height:100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="424" height="95" background="<%=ImagePath%>login_06.gif">&nbsp;</td>
                                        <td width="183" background="<%=ImagePath%>login_07.gif">
                                            <table width="100%" height="95" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="21%" height="30">
                                                        <div align="center"><span class="userInfo">用户</span></div>
                                                    </td>
                                                    <td width="79%">
                                                        <input type="text" id="txtUserName" class="user" /></td>
                                                </tr>
                                                <tr>
                                                    <td height="30">
                                                        <div align="center"><span class="userInfo">密码</span></div>
                                                    </td>
                                                    <td>
                                                        <input type="password" id="txtPsd" class="user" /></td>
                                                </tr>
                                                <tr>
                                                    <td height="35">&nbsp;</td>
                                                    <td align="center">                                                                                                       
                                                        <img id="btnQd" src="<%=ImagePath%>dl.gif" width="41" height="21" border="0" style="cursor: pointer; margin-left: -10px;" onclick="denglu()" />&nbsp;
                                                        <img src="<%=ImagePath%>cz.gif" style="cursor: pointer;" width="41" height="21" border="0" onclick="reset()" />
                                                    </td>
                                                </tr>
                                            </table>
                                        </td>
                                        <td width="255" height="95" background="<%=ImagePath%>login_08.gif">&nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                        <tr>
                            <td height="247" valign="top" background="<%=ImagePath%>login_09.gif">
                                <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                        <td width="22%" height="30">&nbsp;</td>
                                        <td width="56%">&nbsp;</td>
                                        <td width="22%">&nbsp;</td>
                                    </tr>
                                    <tr>
                                        <td>&nbsp;</td>
                                        <td class="banquan" align="center">版权:鲁明公司 技术支持:<a href="http://www.hanweikeji.com" target="_blank">东营汉威</a>
                                        </td>
                                        <td>&nbsp;</td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
            <tr>
                <td class="down">&nbsp;</td>
            </tr>
        </table>
    </form>
</body>
<script type="text/javascript">
    $(function () {
        //高度设置   
        setH(); //高度控制
        $(window).resize(function () {
            setH();
        })
    })
    function setH() {
        $("#tabid").height($(window).height());
    }
    //登录验证用户名密码是否为空
    function denglu() {
        var un = $.trim($("#txtUserName").val());
        var pw = $.trim($("#txtPsd").val());
        if (un == "") {
            $.hwDialog.warn('用户名不能为空!', function (type) {
                $("#txtUserName").focus();
            });
            return;
        }
        if (pw == "") {
            $.hwDialog.warn('密码不能为空!', function (type) {
                $("#txtPsd").focus();
            });
            return;
        }
        //alert("login.aspx?act=loginSys&r" + Math.random()+"&loginID="+ escape(un)+"&loginPSD="+escape(pw))
        $.get("login.aspx?act=loginSys&r" + Math.random(), { loginID: escape(un), loginPSD: escape(pw) }, function (data) {
            //debugger;
            if (data)
                $.hwDialog.error(data);
            else
                location.href = 'default.aspx';
        })
    }
    //回车登录
    document.onkeydown = function (evt) {
        var evt = window.event ? window.event : evt;
        if (evt.keyCode == 13) {
            $("#btnQd").trigger("click");
        }
    }
</script>
</html>
---------------------------------继续分割线---------------------------------------
下面是所有的切图:
cz.gifdl.giflogin_03.giflogin_04.giflogin_06.giflogin_07.giflogin_08.giflogin_09.gif
登录divcss

解决方案 »

  1.   

    。这个时候你就要用到FireFox的Dbug了
      

  2.   

    你这样比较一下
    login_03.gif和login_09.gif所在单元格的样式有没有什么差异,如果有差异调整过来,因为现在是这两幅图在纵向对齐上,有不同。我看你03所在的那个单元格好像有个class="ler"的样式,可以细分析一下。
      

  3.   

    FF的debug可以尝试着修改CSS   挺不错的 我现在和LZ一样 前后以前
      

  4.   


    美工神马的不管这事啊,伤不起
    1、  <td class="ler" background="login_03.gif" valign="top" >
    2、 function setH() {
            var curHeight = $(window).height();
            var trs = $("#tabid .ler").parent().siblings();
            var t_d_height = (curHeight - $("#tabid .ler").height()) / 2;
            trs.eq(0).find("td").height(t_d_height);
            trs.eq(1).find("td").height(t_d_height);
        }
    3、body
            {
                margin: 0px;
                overflow: hidden; 
    /*height: 640px;*/        
            }
      

  5.   


    美工神马的不管这事啊,伤不起
    1、  <td class="ler" background="login_03.gif" valign="top" >
    2、 function setH() {
            var curHeight = $(window).height();
            var trs = $("#tabid .ler").parent().siblings();
            var t_d_height = (curHeight - $("#tabid .ler").height()) / 2;
            trs.eq(0).find("td").height(t_d_height);
            trs.eq(1).find("td").height(t_d_height);
        }
    3、body
            {
                margin: 0px;
                overflow: hidden; 
    /*height: 640px;*/        
            }

    按照你的方法果然成功了,三克油啊,万分感谢