CSS와 HTML이있는 요소의 너비를 부모 구역으로 확장

현재 클라이언트의 백엔드 인터페이스를 개발 중이며 벽돌 벽을 맞았습니다. Internet Explorer (9 베타를 포함한 모든 버전)와 Chrome이 원하는대로 페이지를 표시하지 않는 것 같습니다. Firefox와 Safari가 페이지를 완벽하게 표시합니다. 나는 그것이 사파리 그러나 크롬이 아니라에서 작동한다라고하는 것이 오히려 이상한 것을 안다.. 어떻게해서든지 그 이상이다. - 양식 사파리와 파이어 폭스에서 보이는 방법CSS와 HTML이있는 요소의 너비를 부모 구역으로 확장

가 원하는 결과입니다 :

enter image description here

형태는 사파리와 파이어 폭스가 아닌 다른 모든 브라우저에서 보이는 방법 -이 요구되지 않습니다

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에서 같은 같은데 //jsfiddle.net/jomanlk/FYGeZ/ – JohnP

감사 메이트, 나는 jQuery 플러그인 "Equal Height Columns"을 페이지에 사용하고 있다는 것을 잊어 버렸다. 필자는 그것을 원래 게시물의 코드에 추가했다. 귀하의 도움으로 IE와 Chrome에서 문제를 일으키는 플러그인을 좁혔습니다. Grr 너무 실망! – Jordan

FF에서 Firebug를 사용하여 모든 것이 너비와 패딩 치수를 예상 했습니까? – Pete

이 도움이된다면 모르겠지만, 문제는 플러그인에서 오는 것 같다 있기 때문에, 어쩌면 당신이 대신을 시도 할 수 : HTTP :

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이있는 요소의 너비를 부모 구역으로 확장

답변

관련 문제