Question

我正在为我的客户开发一个后端界面，我已经碰到了一堵砖墙。似乎Internet Explorer（所有版本，包括9 beta）和Chrome都没有按需显示页面。 Firefox和Safari正在完美地显示页面。我觉得它很奇怪，它适用于野生动物园，但不适用于铬..无论如何，除此之外。

表单在Safari和Firefox中的外观 - 这是理想的结果：

enter image description here

表单在Safari和Firefox以外的所有浏览器中的显示方式 - 这是不可取的：

enter image description here

我正在尝试将背景扩展到这些其他浏览器中css中设置的宽度。任何提示和技巧都会非常受欢迎，因为我今天已经被困在这里大约5个小时了，它开始让我非常沮丧。

经过一些帮助后，我已经将问题缩小到jQuery插件“相等高度列”但是我要求效果已经有了，所以肯定有办法在其他浏览器中使这个工作。

我的HTML是：

<head>
    <meta charset="UTF-8">
    <title>User Login</title>
    <link rel="shortcut icon" href="images/favicon.png" />
    <link rel="stylesheet" href="stylesheets/reset.css" type="text/css" />
    <link rel="stylesheet" href="stylesheets/styles.css" type="text/css" />
    <script src="javascript/jquery.js" type="text/javascript"></script>
    <script src="javascript/jquery.equalHeightColumns.js" type="text/javascript"></script>

    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="robots" content="" />

    <script type="text/javascript">

        $(document).ready(function() {
            $("#form_left, #form_right, #form_right input").equalHeightColumns();

         });

    </script>

</head>

<body>

    <a href="forgot_password.html" class="loginmeta">Forgot Password?</a>

    <div id="container">

        <div id="header">
            <h1><a href="#">User Login</a></h1>
        </div>

        <div id="form">

            <form name="login" action="#" method="post">

                <div id="form_left">
                    <label for="">Username</label>
                    <input type="text" id="username" />

                    <label for="">Password</label>
                    <input type="password" id="password" />
                </div>

                <div id="form_right">
                    <input type="submit" name="submit" value="Log In" />
                </div>

                <div class="clear"></div>

            </form>

        </div>      

    </div>  

</body>

和CSS：

//*
TYPE
*/
a.loginmeta                 { position: absolute; 
                          right: 20px; top: 20px; 
                          color: #4a4f5b; 
                          font-size: 12px; }
a.loginmeta:hover           { color: #5d6472; }

/*
    STRUCTURE   
*/
body                        { background:         url('../images/page_background.png') repeat; }
#container                  { width: 480px; display: block;
                          margin: 100px auto 0 auto; }

/*
    FORM
*/      

form                        { width: 480px; margin: 30px 0 15px     0; }

form label                  { color: #919191;
                          text-transform: uppercase;
                          display: block;
                          margin-bottom: 10px; }

form input                  { background: #ffffff;
                          border: 1px solid #d1d1d1;
                          font-size: 17px;
                          color: #414141;
                          padding: 10px; margin-bottom: 10px; 
                          width: 328px; }

#form_left, #form_right     { -webkit-border-radius: 5px;
                          -moz-border-radius: 5px;
                          border-radius: 5px;
                          -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                          box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
                           }

#form_left                  { float: left;
                          width: 350px; 
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3;
                          padding: 20px 20px 10px 20px; }

#form_right                 { float: right;
                          background: url('../images/form_background.png') repeat-x bottom left #f3f3f3; padding-bottom: 30px; }

#form_right input           { width: 80px;
                          font-size: 12px;
                          text-transform: uppercase;
                          color: #939393;
                          background: none;
                          border: none;
                          margin: 15px 0;
                          padding: 0; }                           



***

谢谢！

Answer 1

我不知道这是否有帮助，但由于你的问题似乎来自插件，也许你可以试试这个：

var columnMaxHeight = 0;
$("COLUMN_SELECTOR").each(function() {
    var columnHeight = $(this).height();
    if (columnMaxHeight < columnHeight) {
        columnMaxHeight = columnHeight;
        $(this).height(columnMaxHeight);
    }
});

使用CSS和HTML将Parent Div扩展为Elements的宽度

1 个答案: