2012-09-04 3 views
6

Google 크롬에서 내 웹 페이지를 확대/축소 할 때 서로 정확하게 위치 된 항목의 위치가 변경됩니다. 이는 여러 가지 문제를 일으 킵니다. 예를 들어, 특정 확대/축소 수준에서 div는 테두리를 숨길만큼 div가 포함 된 div와 겹칩니다. 마찬가지로, 때로는 100 % 마커가 100 % 포인트와 정확하게 정렬되지 않습니다.크롬을 확대하면 CSS 위치 지정 문제가 발생합니다.

페이지를 확대하거나 축소 할 때 항목의 위치가 변경되지 않도록 할 수있는 방법이 있습니까?

+2

jsfiddle.net에 코드를 게시하거나 사이트 링크를 제공 할 수 있습니다. –

+0

버그를 발견했다고 생각되면 http://crbug.com에 게시하십시오. 그러면 버그가 수정 될 가능성이 있습니다. – starbeamrainbowlabs

+0

과 동일 http://stackoverflow.com/questions/28223074/absolute-html-layout-is-broken-when-zooming/28223433#28223433 –

답변

8

글꼴 위치를 기준으로 크기를 조정하고 크기를 조정할 수있는 em 위치 지정을 사용할 수 있습니다. 따라서 사람들이 control + 또는 command +를 좋아하면 페이지의 크기가 자동으로 조정됩니다. 탄력적 인 레이아웃에 대한 페이지입니다. 희망이 도움이됩니다. 아래/왼쪽/오른쪽 하단 또는 오른쪽 상단 /에 비해 left: 픽셀 값과 top: 픽셀 값을 사용하여 내 경험에

http://v1.jontangerine.com/log/2007/09/the-incredible-em-and-elastic-layouts-with-css

+0

CSS에서 초보자 용 팁을 제공하는 모든 사이트 중에서이 답변이 가장 먼저 나타납니다 줌 문제가 엠마를 기반으로한다고 언급 한 것을 발견했습니다. 나는 방금 고급 줌 트릭을 알고있는 누군가에 의해 만들어진 줌 스케일링이 좋은 페이지를 모두 단순하다고 가정하지 않았다고 가정했습니다. 감사! –

+0

감사합니다. – earlonrails

2

은 트릭을 할 것으로 보인다. 이것은 Chrome과 FF 모두에 적용되며 IE에 대해서는 언급 할 수 없습니다. 예를 들어

:

#my-element 
{ 
    list-style-type: none; 
    position: fixed; 
    left: 54px; 
    top: 40px; 
} 
1

이 오래된 주제이지만, 나는이 문제에 마주 쳤다. "애매한"요소에 래퍼 컨테이너를 추가하여 수정되었습니다. 그래서 요소 css를 고치려고하기 전에 아마 내용 래퍼를 먼저 확인해야합니다.