크롬 렌더링 버그

Chrome에서 렌더링시 이상한 종류의 불일치가 발생했습니다.크롬 렌더링 버그

문제의 간단한 예는 다음 코드를 사용하여 복제 할 수 있습니다 : 같은 크기를 가져야한다, 몇 마디에, 그래서 span 및 input을

<html> 
<head> 
<style> 
    input, span { 
     border: 1px solid #CCC; 
     padding: 3px 4px; 
     height: 23px; 
     width: 120px; 
     display: block; 
     font-size: 13px; 
    } 
    </style> 
</head> 
<body> 
    <div><span>123</span></div> 
    <div><input type='text'/></div> 
</body> 
</html>

을하지만, 그 크롬을 밝혀

스팬은 실제 크기가 실제의 크기되고 그래서 31px
입력 렌더링 정도로 표현된다 : 다르게 렌더링 요소 크롬이 span 그래서 그 크기가 20 픽셀이다 (테두리 패딩없이) "내부"의 렌더링 같은 input 그것이 그래서 렌더링 동안3210

이 조사 결과는 보인다 "외부"의 크기가 20 픽셀이다.

실제 응용 프로그램에서는 컨트롤이 "내부 편집"시나리오에서 사용되므로 사용자가 스팬을 클릭하면 스팬이 숨겨지고 해당 위치에 입력이 표시됩니다. 보시다시피, 이와 같은 크기 차이로 전환이 원활하지 않습니다. Wjat의 가치는 컨트롤이 테이블 셀에 배치되므로 너비와 높이의 차이로 인해 테이블 전체가 조금씩 레이아웃이 변경된다는 것입니다.

크로스 플랫폼 응용 프로그램에서 작업 중이므로 IE9에서도 작동해야합니다. 문제는 IE가 동일한 크기의 input과 span을 렌더링하므로 IE와 Chrome에서 페이지가 상당히 다르게 보입니다. 내 인생을 더 어렵게 만들기 위해 ASP.NET 서버 컨트롤에서 컨트롤을 렌더링하고 CSS 만 변경할 수 있습니다.

Win7x64에서 Chrome 23.0.1271.91 (게시 시점에 최신)을 사용하고 있습니다.

그래서, THRE 두 가지 질문은 실제로 :

가 어떻게이 문제를 해결합니까?
왜 이런 일이 발생하고 있습니까? 나는 명백한 것을 놓치고 있는가? 그것은 예상되는 행동인가? 크롬 박스 크기 조정을 지원하기 때문에

출처

2012-11-29 J0HN

크롬은 입력 요소와 텍스트 영역에서 기본적으로 box-sizing: border-box;을 설정합니다.

설정 box-sizing: content-box 그들 둘 다 입력처럼 행동 할 경계 상자에 스팬 또는 두 가지 모두 같은 동작하도록합니다. http://www.quirksmode.org/css/box.html

출처

2012-11-29 15:27:07

이 감사를 사용했습니다 이유는이 문제가 해결합니다. 또한 링크가 도움이됩니다. – J0HN

당신은 환영합니다. 행운을 빕니다! –

, 시도 :

<html> 
<head> 
<style> 
    input, span { 
     border: 1px solid #CCC; 
     padding: 3px 4px; 
     height: 23px; 
     width: 120px; 
     display: block; 
     box-sizing:border-box; 

    } 
    </style>  
</head> 
<body> 
    <div><span>123</span></div> 
    <div><input type='text'/></div> 
</body> 
</html>

http://jsfiddle.net/9esTQ/

출처

2012-11-29 15:23:55 chrisgonzalez

대답은 도움이되지만 당신이없이 jsfiddle을 실행하면이 같은 결과를 보여줍니다 박스 크기 :

상자 크기 조정 방법에 대한 좋은 설명은 여기에서 찾을 수 있습니다. 나는 매우 페이스트 빈 : – J0HN

크롬 렌더링 버그

답변

관련 문제