Проблема с FLOAT в Опере 9.5

max999 · April 13, 2010

Стандартно выстроил блоки в ряд с помощью свойства FLOAT:LEFT, но в Опере отображается с отступом (см. скрин).

Макет резиновый, ширина блоков задана в процентах. Почти во всех браузерах нормально отображается, ну, немножко край выпирает (обведено красным), но не существенно. А вот, именно в Опере очень существенно!

Подскажите, пожалуйста, есть ли какой-нибудь хак или способ исправить это глюк в опере?

Заранее благодарен.

скрин

spdif · April 13, 2010

Вам решение тоже в виде картинки вернуть?

mishka · April 14, 2010

Вам решение тоже в виде картинки вернуть?

+1

А вообще я так подозреваю что ширину указали в процентах с десятыми-сотыми частями. А опера понимает только целые числа процентов.

max999 · April 14, 2010

Свойство FLOAT:LEFT, по своей природе, притягивает блоки к левому краю, соответственно справа (у последнего блока) остаётся небольшой отступ (зазор). Этот отступ получается на всех браузерах, но, у некоторых не очень большой, а вот у Оперы слишком большой. Есть ли вообще способ избавиться от этого отступа, то есть, в идеале надо, чтобы блоки без всяких лишних зазоров были растянуты пропорционально на всю ширину от левого и до правого края родительского контейнера, и соответственно, промежутки между блоков были одинаковой ширины, то есть, всё должно быть идеально ровно и пропорционально, ну, и желательно во всех браузерах.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
  <title>opera9.5</title>
  <style type="text/css">
*{margin:0;padding:0;}
body{background: black;}
#bloki{padding:40px;}

#Col-1,#Col-2,#Col-3,#Col-4{
  width: 23.6%;
  height: 100px;
  float: left;
  background: #fc0;}

.space{
  width: 1.95%;
  float: left;}
  </style>
</head>

<body>
<div id="bloki">

<div id="Col-1"></div>

<div class="space"> </div>

<div id="Col-2"></div>

<div class="space"> </div>

<div id="Col-3"></div>

<div class="space"> </div>

<div id="Col-4"></div>

</div>
</body>
</html>

psywalker · April 14, 2010

Опера не понимает доли процентов

max999 · April 14, 2010

Опера не понимает доли процентов

А выход какой? Ну, хорошо, поставлю целые проценты, но ведь сам этот отступ-то останется, ну, меньше станет, но не исчезнет совсем.

stars · April 14, 2010

выход центровать ) и уменьшать отступы на максимум

Edited April 14, 2010 by stars

psywalker · April 14, 2010

Если ситуация позволяет, можно сделать колонки через дисплей-тейбл для всех кроме ИЕ, а для ИЕ отдельно в стилях для них уже на флоат и доли процентах..

max999 · April 14, 2010

выход центровать ) и уменьшать отступы на максимум

Да, про центрирование я в курсе. Просто думал, может хак какой-нибудь есть для решения этой проблемы.

Если ситуация позволяет, можно сделать колонки через дисплей-тейбл для всех кроме ИЕ, а для ИЕ отдельно в стилях для них уже на флоат и доли процентах..

К сожалению, здесь надо обойтись без применения таблиц.

Ладно, пойду делать традиционное центрирование.

Всем спасибо.

max999 · April 14, 2010

psywalker, про "дисплей-тейбл", приведи, пожалуйста, пример, кусочек кода.

max999 · April 16, 2010

psywalker, спасибо за идею с табличными дивами! Я её всё-таки попробовал и это оказалось именно, то, что мне надо, выглядит идеально, и даже в ие6 работает!!! Но, вся засада в том, что при указании доктайпа в ие6 всё рушится, а мне обязательно доктайп нужОн. Есть ли лекарство, чтобы с доктайпом в ие6 работало?

Sign In

Проблема с FLOAT в Опере 9.5

Question

Link to comment

Share on other sites

10 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information