Моя страница отображается в Firefox иначе, чем в Safari
Я работаю над микросайтом для клиента, и все работает почти нормально, за исключением случаев, когда я пытался просмотреть его в Firefox, я был удивлен тем, как выглядели неправильно размещенные вещи... даже если я отключил горизонтальную прокрутку в Firefox U может все же сделать это (не видит горизонтальную прокрутку, но если вы прокручиваете горизонтально, это показывает), даже веб-шрифт отличается, хотя веб-шрифт отлично отображается на Firefox на других страницах... и третья проблема - верхний край страницы, в Свойства страницы Я указал, что поле равно 0, и в Safari это сработало, а в Firefox - нет. Может кто-нибудь, пожалуйста, скажите мне, что делать.. У меня есть только строка меню spry и плагин easing (animate2id), который может быть причиной проблемы, может быть? в Safari это выглядит так, как я хочу, чтобы это выглядело.. спасибо заранее.. может быть, я должен упомянуть, что я новичок, и я знаю, что я знаю по самообучению.
вот код на случай..
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Annual Report 2012</title>
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<link href="micro-site.css" rel="stylesheet" type="text/css" />
<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
<link href="SpryAssets/SpryMenuBarHorizontal.css" rel="stylesheet" type="text/css" />
<style type="text/css">
body {
background-color: #39949C;
overflow-x: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>
<link href="muli-fontfacekit/stylesheet.css" rel="stylesheet" type="text/css" />
<body leftmargin="0" topmargin="0">
<div id="rotator-controls" class="panel span2">
<div id="rotator-slides">
<a class="" href="micro-site.html" onclick="Animate2id('.slide-content'); return false" title="Go to 1st content with the default easing">1</a>
<a class="" href="#slide-content2" onclick="Animate2id('#slide-content2','easeInOutExpo'); return false">2</a>
<a class="" href="#slide-content3" onclick="Animate2id('#slide-content3','easeInOutExpo'); return false">3</a>
<a class="" href="#slide-content4" onclick="Animate2id('#slide-content4','easeInOutExpo'); return false">4</a>
<a class="" href="#slide-content5" onclick="Animate2id('#slide-content5','easeInOutExpo'); return false">5</a>
</div>
<div id="rotator-nav">
<a href="#" class="prev">‹</a>
<a href="#" class="next">›</a>
</div>
</div>
</div><!--end of header -->
</div><!--end of slide-container -->
</div><!--end of body -->
<div id="Sitemap"></div>
</div><!--end of container -->
</div>
<script type="text/javascript">
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
function Animate2id(id,ease){ //the id to animate, the easing type
var animSpeed=2000; //set animation speed
var $container=$("#slide-container"); //define the container to move
if(ease){ //check if ease variable is set
var easeType=ease;
} else {
var easeType="easeOutQuart"; //set default easing type
}
//do the animation
$container.stop().animate({"left": -($(id).position().left)}, 2000, easeType);
}
</script>