WebKit 너비가 업데이트되지 않습니까?

StackOverflow https://stackoverflow.com/questions/1219170

문제

창 크기 조정에 실행되는 코드가 있습니다. 나는 그것을 당기고있다 width, 그리고 outerWidth 입력 텍스트 요소의.

이 프로세스는 WebKit을 제외한 모든 브라우저에서 제대로 작동하며, 이는 적절한 결과를 반환합니다. outerWidth, 그러나 결과는 width 절대 변하지 않습니다 On Load Original에서.

브라우저 창을 크기를 조정할 때 스크립트의 실제 콘솔 출력입니다 (크롬이지만 Safari 4에서도 마찬가지입니다).

outerWidth: 772
width: 772
outerWidth: 773
width: 772
outerWidth: 773
width: 772
outerWidth: 794
width: 772
outerWidth: 794
width: 772
outerWidth: 815
width: 772
outerWidth: 815
width: 772
outerWidth: 820
width: 772
outerWidth: 837
width: 772

전에 경험 한 사람이 있습니까? 왜 그런 일이 일어나는지 아십니까? 그리고 가장 중요한 것은 주변에서 일하는 방법을 알고 있습니까? :)

고맙습니다.

도움이 되었습니까?

해결책

여기 내 테스트 사례가 있습니다. 둘 다 예상대로 작동하는 것 같습니다 (Safari 4).

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <style type="text/css">
    input {
      width: 50%;
      height: 2em;
      font-size: 1em;
    }
  </style>
</head>
<body>
  <p>
    <input type="text" id="w" />
  </p>
  <p>
    <input type="text" id="ow" />
  </p>
  <script type="text/javascript">
    function init(){
      $('#w').val($('#w').width());
      $('#ow').val($('#ow').outerWidth());
    }
    $(function(){
      init();

      $(window).resize(function(){
        init();
      });
    });
  </script>
</body>
</html>
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top