Win8.1+ Firefox에서 가로 스크롤 막대를 동시에 표시하지 않을 때의 해결 방법

4105 단어 HTMLCSS
Win8.1+ Firefox 처리 방법

개요


매우 좁은 범위 내에서 이런 표시를 표시하려고 할 때, 때로는 스크롤 막대만 표시한다

해결책


width, height 각각 51px 이상 지정
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>sample</title>
  <style>
    .box {
      /*ここ*/
      width: 51px;
      height: 51px;
      overflow: auto;
      background-color: #ddd;
      word-break: keep-all;
    }
  </style>
</head>
<body>
  <div class="box">
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
    <span>contentcontentcontentcontentcontentcontentcontent</span>
    <span>コンテンツコンテンツコンテンツコンテンツコンテンツ</span>
  </div>
</body>
</html>

참고 자료


경계 행위
/* パターン1 横のバーのみ表示される */
.box {
  width: 50px;
  height: 50px;
}

/* パターン2 横のバーのみ表示される */
.box {
  width: 51px;
  height: 50px;
}

/* パターン3 縦のバーのみ表示される */
.box {
  width: 50px;
  height: 51px;
}


각 최신 브라우저의 작업


대략 2015/7/14시 최신 브라우저의 동작
OS
브라우저
액션
OS X Yosemite
Chrome
정상이었어
OS X Yosemite
Firefox
정상이었어
OS X Yosemite
Safari
정상이었어
Win 8.1
Chrome
정상이었어
Win 8.1
Firefox
수평 표시줄만 보이기
Win 8.1
IE 11
정상이었어

좋은 웹페이지 즐겨찾기