Как я могу исправить свой код CSS для работы с IE (где он показывает полосы прокрутки)? - PullRequest
Новая
       11

Как я могу исправить свой код CSS для работы с IE (где он показывает полосы прокрутки)?

1 голос
/ 09 июня 2009

У меня есть следующий код CSS, отлично работает с Firefox, Chrome, но ломается, как ад, когда я запускаю его в IE7! 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <title>Box Test</title>

    <style type="text/css">

        .mybox  { float:left;  overflow:auto; visibility:visible;
          width:220px; height:100px; 
          margin:3px; padding:10px; 

          border-left:1px solid gray; border-right:1px solid black; 
          border-top:1px solid gray;  border-bottom:1px solid black; 
          background-color:gold; }

    .small { width:45px; height:auto; font-weight:bold;}

    .boxfont{font-weight:bold; font-size:16px; margin-left:15px;} 

    </style>

  </head>

  <body>

     <div class="mybox small">
    box 1
        <div class="boxfont">box1 label</div>
      </div>

     <div class="mybox small">box 2</div>

     <div class="mybox small">box 3</div>


  </body>

</html>

Почему я получаю полосы прокрутки в первом окне в IE7, а НЕ в любом другом браузере?

Ответы [ 5 ]

1 голос
/ 17 апреля 2012

Если вы можете удалить свойство overflow:auto, оно может работать. Но лучше настроить IE7 cross css style , чтобы исправить проблему с полосой прокрутки.

1 голос
/ 09 июня 2009

Проблема, с которой вы столкнулись, связана с проблемой IE Box Model . Вы можете устранить проблему с отображением в вашем коде, заменив определение .boxfont, как показано ниже. 

.boxfont{font-weight:bold; font-size:16px; margin-left:10px;}
1 голос
/ 09 июня 2009

Либо увеличьте ширину от .mybox до 60px, либо установите overflow:hidden. Это потому, что IE7 показывает полосы прокрутки с другим вычислением ширины, это очень раздражает ...

1 голос
/ 09 июня 2009

.small имеет ширину 45px и отступы слева и справа 10px. .boxfont имеет левое поле 15px.

45px-10px-10px-15px оставляет вам только 10px места для вашего текста. Другие браузеры показывают текст, IE вставляет полосы прокрутки.

Поместите overflow:hidden в .boxfont, чтобы увидеть, где он обрезан в Firefox.

Чтобы это исправить, вы можете поставить overflow:visible на .small, чтобы IE показывал текст, но это сделает вашу коробку немного больше. Или вы можете просто немного увеличить ширину вашей коробки.

1 голос
/ 09 июня 2009

Я подозреваю, overflow:auto в .mybox, но я не могу проверить это, потому что у меня нет доступа к IE7 на данный момент.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...