使用CSS和HTML將父元素展開爲元素的寬度

我目前正在爲我的客戶開發後端界面，並且我碰到了一堵磚牆。似乎Internet Explorer（包括9測試版在內的所有版本）和Chrome瀏覽器都不會根據需要顯示該頁面。 Firefox和Safari正在完美地顯示頁面。我覺得它很奇怪，它適用於safari而不是chrome ..無論如何，這是除了點。使用CSS和HTML將父元素展開爲元素的寬度

形式如何看在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; }       



***

謝謝！

來源

2011-03-10 Jordan

看起來IE8，FF3和Chrome10相同：HTTP： //jsfiddle.net/jomanlk/FYGeZ/ – JohnP 2011-03-10 09:50:04

感謝隊友，我忘了補充說我在頁面中使用jQuery插件「Equal Height Columns」 - 我將它添加到原始文章中的代碼中。在您的幫助下，我縮小了該插件在IE和Chrome中造成的問題。 Grr很沮喪！ – Jordan 2011-03-10 10:48:54

您是否嘗試過在FF中使用Firebug來澄清一切具有您期望的寬度和填充尺寸？ – Pete 2011-04-11 22:06:12

我不知道這是否會有所幫助，但由於您的問題似乎是從插件的到來，也許你可以試試這個：

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

來源

2011-04-13 12:45:37 Krimo

使用CSS和HTML將父元素展開爲元素的寬度

回答

相關問題