#css #internet-explorer-7 #css-float #internet-explorer-6
#css #internet-explorer-7 #css-float #internet-explorer-6
Вопрос:
кажется, у меня возникает плавающая проблема при перемещении divs внутри контейнера, который также содержит текст в ie6 и ie7.
http://mwl.webgen.gsm.org/discussions/proin-elementum-lectus-eget-est-9/1358/
если вы посмотрите на рейтинг звезд здесь, в FF или ie8 , вы увидите, что звезды должны располагаться слева от текста контейнера (фактический рейтинг в виде числа), но, как бы я ни старался, я ни за что на свете не могу заставить это работать, они просто опускаются ниже.
Я надеюсь, что это имеет смысл, я потратил около 4 часов, пробуя разные вещи, устанавливая display на встроенный блок и т.д., Но безрезультатно.
Комментарии:
1. Да, это так. Вы не возражаете, если я перекодирую все это?
2. Что вы имеете в виду, перекодировав все это? К сожалению, я не могу изменить какую-либо разметку, поэтому это должно быть чистое CSS-решение: (
3. ОК. Смотрите мой ответ. В IE9 есть 10 пустых текстовых узлов прямо под «div class =»stars», в то время как в IE7 есть только 1.
Ответ №1:
Кажется, это работает
<div class="stars" style="width: 150px !important; float: right;">
<span class="starsAverage" style="float: left;">
Комментарии:
1. хммм, это, кажется, ставит среднее значение рядом со звездочками, что круто, но оно все равно опускается на строку ниже, но оставляет «()» на строке выше.
2. У меня это отлично работало в IE7. Используете ли вы IE9 в режимах IE8 и IE7 или используете их автономно. Как проходит тестирование в IE6?
3. я использую ie6 с использованием ie tester, изначально запущенный ie8 / firefox. Эта проблема в ie9 — еще одна проблема, поскольку, похоже, он просто показывает переключатели, поэтому я не думаю, что javascript работает там должным образом.
4. я обновил css в ссылке, как вы сказали, тогда это выглядит правильно для вас? я в основном хочу, чтобы это выглядело как «Рейтинг: (3) *****» все в одной строке
5. Пожалуйста, взгляните на это. В чем разница? (IE9) — i51.tinypic.com/2q9vtdg.jpg (IE7) — i51.tinypic.com/10o4dgg.jpg
Ответ №2:
Хорошо, я понял, приятель. Пожалуйста, следуйте дальше.
1 — Сначала мы удаляем «float: left»
DIV.rating .stars SPAN.starsAverage
{
float: left /*remove this*/
}
2 — Снова мы удаляем «float: left» и меняем «display: block» на «display: inline;»
.ui-stars-star
{
float: left; /*remove this*/
display: inline; /*changed from display: block;*/
}
3 — Далее мы меняем ширину с «8px» на «18px» и добавляем «zoom: 1» к каждому div
<div class="ui-stars-star ui-stars-star-on" style="width: 18px; zoom:1">
4 — Далее мы удаляем «margin-left: -8px;» из «a» в приведенном выше div
inline style
{
margin-left: -8px; /*remove this*/
}
5 — Теперь мы меняем ширину
DIV.rating
{
width: 260px;
}
6 — Снова меняем ширину
DIV.rating .stars
{
width: 210 !important;
}
И все такое. Вот оно. Затраченное время: 2 часа 31 минута. Я вышлю вам счет.