Разная реакция браузеров на float

Borka · August 9, 2013

Здравствуйте . Подскажите пожалуйста , почему разные браузеры реагируют на свойство float по разному?

Вот есть два блока


<div id = 'shapka'>
               <div id = 'firsttable'>
                          <table>
                           </table>
                </div>
</div>
<div id = 'tm' >
     <table>
......................................................................
     </table>
<div>

задаем такой стиль


#firsttable table {

    margin-top: 14px;
    float: right;
    text-align: center;
    width: 56%;

}

и что мы видем в фаирфокс

а в chrome

т.е фаирфоксу пофиг что firstable находится в div, а значит обтекание идет вокруг таблицы .Хром получается отображает правильно.

И еще такой вопрос . почему при изменении масштаба страницы в chroome содержимое дочернего блока выходит за границы, несмотря на то что у родителя стоит border?

antonKar · August 9, 2013

А таблица - это что на картинке?

Хз что может быть, без исходников вряд ли что можно сказать.

Да и делать float к таблице - это как-то по-гейски, лучше уж родительский div-обёртку флоатить, чем таблицу

Edited August 9, 2013 by antonKar

Borka · August 9, 2013

А таблица - это что на картинке?
Хз что может быть, без исходников вряд ли что можно сказать.
Да и делать float к таблице - это как-то по-гейски, лучше уж родительский div-обёртку флоатить, чем таблицу


<div id = 'shapka'>
	   <div id = 'firsttable'>
	    <table>
		 <tr>
		  <td width="60">
		   <p> <a href = '#.html'> Home </a></p>
		  </td>
		  <td>
		   <p> <a href = '#.html'> About Us </a></p>
		  </td>
		  <td>
		   <p> <a href = '#.html'> Contact </a></p>
		  </td>
		  <td class = 'blog'>
		   <p> <a href = '#.html'> Blog </a></p>
		  </td>
		  <td class = 'blog'>
		   <p> <a href = '#.html'> <img src = 'images/sirena.gif'> </a></p>
		  </td>
		  <td class = 'posts'>
		   <p > Please subscribe to: <a href = '#.html'>Posts </a></p>
		  </td>
		  <td class = 'com' width = '30'>
		   <p><a href = '#.html'>Comments </a></p>
		  </td>
		  <td class = 'email' width = '20'>
		   <p><a href = '#.html'>Email</a></p>
		  </td>

		 </tr>
	    </table>

	   </div>

  </div>
  <div id = 'forma'>
   <table style = 'width: 100%;'>
    <tr>
	 <td>
	  <div id = 'box'>
		 <p id = 'btext'>Box&Cube</p>
		 <p id = 'stext'>CREATE & INNOVATE SOLUTIONS</p>
	  </div>
	 </td>
	 <td>

	  <form name = 'searchform' action = '#' method = 'post' class = 'ff'>
	   <div id="search">
	    <div>
	    <input type="search" name="q" value = 'введите ченить'>
	    </div>

	    <input type="IMAGE" src="images/s.gif" value="">
	   </div>
	  </form>
	 </td>
    </tr>
   </table>
  </div>

вот исходник. таблица это которая (home about us ...)

она обернута в div. под ним начинается другой div который Box&Cube. Т.к. float применен к таблице которая в другом блоке то обтекания не должно происходить ! Chrome правильно показывает

SelenIT · August 9, 2013

Т.к. float применен к таблице которая в другом блоке то обтекания не должно происходить !

Неважно, в каком блоке. Важно, в каком контексте форматирования. Если блок не создает отдельного контекста форматирования (у него не стоит overflow:hidden, display: inline-block, float и т.п.), то float его игнорирует и проходит насквозь (если в блоке нет ничего, кроме float-а, то он «схлопывается» в ноль). Так что правильно по стандарту показывает как раз firefox, а чтобы везде было как надо, второму диву нужно поставить clear:right.

Borka · August 9, 2013

Т.к. float применен к таблице которая в другом блоке то обтекания не должно происходить !
Неважно, в каком блоке. Важно, в каком контексте форматирования. Если блок не создает отдельного контекста форматирования (у него не стоит overflow:hidden, display: inline-block, float и т.п.), то float его игнорирует и проходит насквозь (если в блоке нет ничего, кроме float-а, то он «схлопывается» в ноль). Так что правильно по стандарту показывает как раз firefox, а чтобы везде было как надо, второму диву нужно поставить clear:right.

второму диву это какому?

SelenIT · August 9, 2013

Который <div id = 'forma'>, судя по всему.

Borka · August 10, 2013

Который <div id = 'forma'>, судя по всему.
Который <div id = 'forma'>, судя по всему.

пасиба! все зарабатоло. не знаю как лойс то поставить в репутацию

Borka · August 10, 2013

да подскажите что с масштабированием то делать? вот так выглядит страница в хроме и опере при масштабе 25% это ведь не нормально?

antonKar · August 10, 2013

при масштабе 25% это ведь не нормально?

Проверять вёрстку в масштабе 25% - это не нормально.

Borka · August 10, 2013

при масштабе 25% это ведь не нормально?
Проверять вёрстку в масштабе 25% - это не нормально.

хах :rofl: . вообще-то я и на 100% проверял. просто если ужать контент начинает выдавливаться вниз. Нужно ли это как-то исправлять если при 100% масштабе все выглядит в соответствии с psd макетом?

Zverushka · August 10, 2013

И кому надо смотреть страницу на 25% масштаба?

Struggle · August 10, 2013

при масштабе 25% это ведь не нормально?
Проверять вёрстку в масштабе 25% - это не нормально.

Вообще-то нормальная верстка, не должна ссыпаться при уменьшении размера масштаба, также при увеличении

да подскажите что с масштабированием то делать? вот так выглядит страница в хроме и опере при масштабе 25% это ведь не нормально?

Скинь линк, посмотрим

Borka · August 11, 2013

при масштабе 25% это ведь не нормально?
Проверять вёрстку в масштабе 25% - это не нормально.
Вообще-то нормальная верстка, не должна ссыпаться при уменьшении размера масштаба, также при увеличении
да подскажите что с масштабированием то делать? вот так выглядит страница в хроме и опере при масштабе 25% это ведь не нормально?
Скинь линк, посмотрим

вот http://boxcube.zz.mu/copy/tablica.html . Да, и если есть замечания по верстке напиши пожалуйста

Struggle · August 11, 2013

при масштабе 25% это ведь не нормально?
Проверять вёрстку в масштабе 25% - это не нормально.
Вообще-то нормальная верстка, не должна ссыпаться при уменьшении размера масштаба, также при увеличении
да подскажите что с масштабированием то делать? вот так выглядит страница в хроме и опере при масштабе 25% это ведь не нормально?
Скинь линк, посмотрим
вот http://boxcube.zz.mu/copy/tablica.html . Да, и если есть замечания по верстке напиши пожалуйста

Переверстай без таблиц, полностью, проблема решиться

Размеры текста в px, а не pt,

Вверхнее меню налезает на вверх и влево (там 100% ширина для меню), из-за этого идёт скос, еще в одной ячейке размер 60%, в другой 50%, не стыковка, и вообще, когда будешь верстать на дивах, убери из головы проценты, они не нужны, макет фиксированной ширины

Меню должно быть в списках,

<ul class="menu">
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>

когда будешь верстать, смотри чтобы было слажено, я бы сделал так

<div class="header">
<div class="logo">
<h1>Логотип</h1>
<h2>Описание</h2>
</div>

<div class="topright">
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>

<div class="search">

</div>
</div>


потом стили

.logo {
float: left;
}

.topright {
float: right;
margin-right: 40px;
background: #ccc;
запиливаем радиусы, или целый background вырезаный из фотошопа
}

.

Edited August 11, 2013 by Struggle

Borka · August 11, 2013

при масштабе 25% это ведь не нормально?
Проверять вёрстку в масштабе 25% - это не нормально.
Вообще-то нормальная верстка, не должна ссыпаться при уменьшении размера масштаба, также при увеличении
да подскажите что с масштабированием то делать? вот так выглядит страница в хроме и опере при масштабе 25% это ведь не нормально?
Скинь линк, посмотрим
вот http://boxcube.zz.mu/copy/tablica.html . Да, и если есть замечания по верстке напиши пожалуйста
Переверстай без таблиц, полностью, проблема решиться
Размеры текста в px, а не pt,
Вверхнее меню налезает на вверх и влево (там 100% ширина для меню), из-за этого идёт скос, еще в одной ячейке размер 60%, в другой 50%, не стыковка, и вообще, когда будешь верстать на дивах, убери из головы проценты, они не нужны, макет фиксированной ширины
Меню должно быть в списках,
<ul class="menu">
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>
когда будешь верстать, смотри чтобы было слажено, я бы сделал так
<div class="header">
<div class="logo">
<h1>Логотип</h1>
<h2>Описание</h2>
</div>

<div class="topright">
<ul>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
<li><a href="#">Пункт</a></li>
</ul>

<div class="search">

</div>
</div>


потом стили

.logo {
float: left;
}

.topright {
float: right;
margin-right: 40px;
background: #ccc;
запиливаем радиусы, или целый background вырезаный из фотошопа
}
.

Спасибо за проверку. буду исправлять

Sign In

Разная реакция браузеров на float

Question

Link to comment

Share on other sites

14 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

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

Similar Content

Обсуждения

Important Information