写了一段前端代码，TT浏览器不兼容，排版错位
1.据说TT浏览器是IE的内核，但是为什么我在IE打开都是对的，在TT却不行，排版乱了。
2.有没有什么好的浏览器兼容，或者浏览器之间特性区别相关的资料，共享一下嘛~小女感激不尽。
3.对于学习前端，有没有什么好的建议？
下面贴代码，复制到dreamweaver就可以运行。IE正常，TT不行。。。
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" rel="stylesheet" href="css/reset.css"/>
<link type="text/css" rel="stylesheet" href="css/custom.css"/>
<title>订单</title>
<style>
/*=================
reset
===================*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
body {
line-height: 1;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/*===================
global
=====================*/
a{ text-decoration:none;}
ul li{ list-style:none;}
.ul_fl li{ float:left;}
.fl{float:left;}
.fr{float:right;}
.dis{ display:inline-block; vertical-align:top;}
.disbtm{display:inline-block; vertical-align:bottom;}
.wid{ min-width:942px; margin:0 auto;} //一般用来给content
.vam{ vertical-align:middle;}
.clear{ clear:both;}
/*清除浮动 >>cc作用于父模型 >>c作用于浮动模型后，父模型区域里*/
.cc{zoom:1;}
.cc:after{content:'\20';display:block;height:0;clear:both;visibility:
hidden;}
.c{clear:both;height:0;font:0/0 Arial;overflow:hidden;width:0;}
/*========================
layout
=========================*/
body{ background:url(../img/bg_body_hp.jpg); font:13px "微软雅黑";}
.top{ height:104px; background:url(../img/bg_topbar.png) repeat-x;}
.header,.nav{ width:966px; margin:0 auto;}
.header{ color:white; height:46px;}
.content{ min-width:966px; margin:0 auto; background:white;}
/*=====================
header
=====================*/
.dlwrp{ margin:20px 0 0 0;}
.dlwrp a{ color:white; margin:0 10px 0 0;}
/*nav*/
.nav li a{color:#333333;font-size:17px;width:120px;height:48px;line-height:48px;margin-top:3px;border-left:#B7B5B6 1px solid;display:inline-block;}
.nav li{width:120px;height:56px;text-align:center;}
.nav li:hover,.cur{background:#FF9934;}
/*search*/
.searchwrp{ width:309px; position:relative; float:right; margin:10px 0 0 0;}
.searchwrp .search{border:#F3C99F 1px solid;border-radius:8px;color:#989898;font-size:17px;padding-left:15px;width:290px;height:29px;line-height:29px\9;}
.searchwrp .btn_search{width:42px;height:32px;border:none;background:url(../img/bg_btn_search.png); position:absolute; right:0; top:1px;}
</style>
</head>
<body>
<div class="top">
<div class="header">
<div class="hgroup">
<img class="logo disbtm" src="img/logo_homepage.png">
<p class="disbtm">城市:北京</p>
<p class="fr dlwrp"><a href="#">登录</a><a href="#">注册</a></p>
</div>
</div>
<div class="nav">
<ul class="menu dis ul_fl">
<li><a href="#">首页</a></li>
<li><a href="#">订座点餐</a></li>
<li><a href="#">外卖/自提</a></li>
<li><a href="#">有奖活动</a></li>
<li><a href="#">积分兑换</a></li>
</ul>
<form action="#" method="get" class="dis searchwrp">
<input type="text" value="搜索菜系,店名"class="search"/>
<input type="submit" value="" class="btn_search"/>
</form>
</div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
