This is an html page :
<html>
<head>
<title>
Frame Set
</title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<link rel="stylesheet" href="frame.css" type="text/css" media="screen" />
<script language="JavaScript" type="text/javascript">
$(document).ready(function() {
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$('#main').css({'margin-left':margin,'margin-right':margin});
}
)
$(function() {
$(".frame").each(function() {
var width = ($(this).find('.h').width()),
height = $(this).find('.l').height(),
pad = $(this).find('.h').position().left,
actWidth = width + 10,
nHeight = height - (height * 2),
rLeftMargin = actWidth - 1,
bWidth = actWidth;
$(this).find('.r').css({'margin-top':nHeight, 'margin-left':rLeftMargin, 'height':height});
$(this).find('.h').css({'height':25});
$(this).find('.b').css({'width':bWidth, 'margin-top':0});
});
});
</script>
</head>
<body>
<div id="main" align="center" style="width:1000px; height:100%; text-align:left;">
<div id="inner1" style="width:100%; height:20%; float:top; margin-bottom: 20px;">
<div id="inner11">
<div class="frame">
<div class="h" style="width:100%">Header</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner2" style="width:100%; height:60%;">
<div id="inner21" style="width:69%; float:left; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Left Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
<div id="inner22" style="width:29%; float:right; margin-left: 1px; margin-right: 1px;">
<div class="frame">
<div class="h" style="width:100%">Right Frame</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
<div id="inner3" style="width:100%; height:20%; float:bottom; margin: 2px 2px 2px 2px;">
<div id="inner23">
<div class="frame">
<div class="h" style="width:100%">Footer</div>
<div class="l" style="height:93%"></div>
<div class="r"></div>
<div class="b"></div>
</div>
</div>
</div>
</div>
</body>
</html>
This is Mozilla output :
This is IE8 output :
What is the problem ?
Давайте здесь немного поможем ...
См. Ответ @ Topera
Пожалуйста, не используйте
var winSize = $(window).width();
var margin = (winSize-1000)/2;;
$('#main').css({'margin-left':margin,'margin-right':margin});
}
Вместо этого используйте свойство CSS margin: 0 auto
. Как правило, всегда используйте решение CSS вместо Javascript, где это возможно.
См .:
http://www.positioniseverything.net/articles/onetruelayout/equalheight
http://matthewjamestaylor.com/blog/equal-height-columns- cross-browser-css-no-hacks
Во избежание путаницы, пожалуйста, не называйте элементы без фрейма фреймами. Для получения дополнительной информации о фреймах см .: http://reference.sitepoint.com/html/elements-frames-windows
Дайте вашим классам понятные имена. Причина этого та же для любого другого языка - так что, когда вы вернетесь позже через три месяца, вы не будете чесать голову в классах под названием l
, r
и ч
.
Атрибуты align
и text-align
официально объявлены устаревшими; см. приведенное выше решение по выравниванию объектов по центру и свойство CSS text-align
вместо этого.
Элементы HTML придают смысл содержимому, в которое они заключены.Заголовки, которые у вас есть для каждого «кадра», должны быть размечены заголовками
или
, тогда как
div
являются общими элементами уровня блока. не имея смысла, набор элементов с h1
до h6
(за неимением лучшего слова) сообщает браузеру, что содержащийся в них текст является заголовками.
Пожалуйста, посмотрите, как блочная модель и поплавки работают в CSS. bottom
и top
не являются допустимыми значениями для свойства CSS float
.
http://dev.opera.com/articles/view/30-the-css-layout-model-boxes-border/#cssboxmodels
http://reference.sitepoint.com/css/boxmodel
http://www.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/
здесь не в браузерах. IE8 на удивление ведет себя гораздо хуже, чем его предшественники. Попробуйте вместо этого написать более качественный HTML и CSS.
используйте doctype: list в в тот момент, когда я бы использовал -> XHTML 1.0 Строгий, XHTML 1.1, HTML5 (нельзя, если вы не знакомы с проблемы, которые могут возникнуть
используйте сброс: eric meyers reset для xample - хороший вариант
используйте clearfix (и знайте, когда его использовать) например новый clearfix Джеффа Старра
, используя эти три вещи, это хорошее начало, чтобы ваш веб-сайт выглядел одинаково во всех браузерах.после этого вы должны узнать о пользовательских ошибках браузера, таких как ошибка двойного поля и так далее.
Для кроссбраузерности вам понадобится несколько инструментов, большой опыт и, на всякий случай IE, удачи. В дополнение к другим ответам здесь вы можете использовать Yahoo CSS, который дает вам общую базу (все браузеры не имеют одинаковых значений по умолчанию): http://developer.yahoo.com/yui/reset/
Проблема в том, что не все браузеры используют один и тот же механизм визуализации или правила визуализации. Это постоянный источник горя для веб-разработчиков, и, похоже, это не исчезнет в ближайшее время.
По возможности используйте CSS, поскольку браузеры лучше всего соответствуют строгим правилам таблицы стилей. Кроме того, удачи и добро пожаловать в веб-разработчика :)