소수점의 px 지정으로 레이아웃이 무너지는 현상을 생각한다

4007 단어 HTML5
border-width: 1.5px로 설정했을 때에, 「어라, 어쩐지 잘 모르는 렌더링이 행해지고 있다」라고 하는 일이 있었으므로 기록합니다. 레어 케이스이므로, 헤이 그런 일이 있다는 낭비 지식으로서, 당신의 생활을 풍요롭게 할지도 모릅니다.

확인한 브라우저 목록


  • Google 크롬 83
  • FireFox 78 1
  • Edge 83
  • Internet Explorer 11

    • 구현



    다음은 구현한 코드입니다.
    <!DOCTYPE html>
<html>
    <head>
        <style>
            hr {
                border: 0;
                border-top: 1px solid black;
                border-width: 1.5px;
                border-color: red;
            }
        </style>
    </head>
    <main>
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
        <h1>aaa</h1>
        <hr />
    </main>
</html>

    결과



    Chrome 브라우저에 표시된 내용을 살펴 보겠습니다.
    훌륭하게 hr 태그로 설정한 border의 두께가 이상합니다.
    왜?



    고찰



    먼저 style 태그에 설정한 내용을 살펴보겠습니다.
    hr {
  border: 0;
  border-top: 1px solid black;
  border-width: 1.5px;
  border-color: red;
}

    스타일은 위에서부터 순서대로 평가되므로,
  • border는 상하 좌우 모두 0을 설정
  • border 위에만 1px의 검은 선을 그립니다
  • border의 크기는 1.5px를 적용한다.
  • border 색상이 빨간색으로 변경

    • 그렇습니다, 거기까지 이상한 일은하지 않는 것 같습니다.
    그러나 border-top을 1로 하고 있는데, border-width를 1.5로 하고 있는 것이 쉽습니다.
    그래서, border: 0.75px solid red; 등으로 하여 상하가 1.5px씩 영역을 취하도록 해 봅시다.

    ... 취할 수 없습니까?
    그렇습니까 ... 브라우저는 1 이하의 픽셀 지정, 대응하지 않는 것 같습니다 ... 😇



    요약



    소수점을 사용한 픽셀 지정, 기본적으로 그만두는 것이 무난합니다 😇
    (※ 최종적으로 2px로 지정했습니다)



    그건 그렇고, FireFox는 균등 한 두께로 렌더링됩니다. ↩
    HTML5로 음악을 흘리는 방법
    를 사용하여 이미지를 고해상도 디스플레이에 대응합시다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage