Странная ошибка в моем CSS-коде, заставляющая текст случайным образом получать огромный «запас» - PullRequest
Новая
       18

Странная ошибка в моем CSS-коде, заставляющая текст случайным образом получать огромный «запас»

2 голосов
/ 23 декабря 2010

Я не знаю, почему это происходит.

У меня есть этот код здесь .

Работает нормально, но "иногда" (и много раз подряд) без видимой причины это происходит:

alt text

Для всех .box класса.

Извините, я должен поделиться "всем" своим кодом, но я понятия не имею, почему это так.

Вот как это должно выглядеть:

alt text

Я не знаю, является ли это обычным делом, но идентификатор, который вы хотите, вы можете скачать два файла с здесь (HTML и CSS + Images), потому что в jsfiddle, кажется, все время работает 1024 *

Я не знаю, имеет ли это значение или нет, но я использую Chrome (последний) на Mac.

РЕДАКТИРОВАТЬ: Кажется, я каждый раз отлично работаю в сафари.

Заранее спасибо !! Пожалуйста, попросите пояснений!

Кстати, мой заголовок абсолютно ужасен, извините! но я понятия не имею, в чем проблема, поэтому я не могу описать ее, не стесняйтесь редактировать или комментировать любые предложения.

Ответы [ 2 ]

1 голос
/ 23 декабря 2010

На style.css

  1. Удалить overflow:hidden на #container
  2. Установить overflow:hidden до .box
  3. Набор float:left до .box img
  4. Набор float:right до .follow

новый 

#container {
    height:100%;
    width:520px;
    position:relative;
    left:50%;
    margin:20px 0 0 -250px;
}
.box {
    border:1px solid gray;
    height:200px;
    width:500px;
    float:left;
    margin:0px 0 20px 10px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
    overflow:hidden;
}
.box img {
    width:140px;
    height:140px;
    margin: 15px 0 0 15px;
    float:left;
}
.follow {
    /*outline:1px solid red;*/
    height:80px;
    width:260px;
    float:right;
    margin:25px 30px 0 0;
}
0 голосов
/ 23 декабря 2010

Чтобы сделать ваш CSS более чистым, когда вы устанавливаете стили для .box:hover, вам не нужно повторно объявлять вещи, которые уже применяются к .box.Все .box стили наследуются .box:hover.(Пример того, как у вас есть поплавок: слева на обоих).

Как говорится, это почти наверняка проблема float.Настройте оба свойства float и clear двух внутренних элементов div, внешнего элемента div и img, чтобы узнать, чему вы научитесь.Трудно оказать помощь, когда проблема не возникает в скрипке.

...