urgent! The title should be long~_html/css_WEB-ITnose

昨天临时接了个任务，修改个网页的前端CSS。
由于之前完全没有接触过。所以特来求助。。。
1、下面这种写法没搞懂是什么意思。

#mainBox #topBanner #menu{	display:table;	width:auto;	height:100%;	float:left;}

2、下面这段CSS在IE7以及IE8正常，但在IE9以上不正常。
这段主要实现是顶部的一个工具栏。

CSS:#mainBox{	display:block;	margin-left:auto;	margin-right:auto;	width:940px;}#mainBox #topBanner{	display:none;	width:100%;	height:30px;	background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{	width:230px;	height:100%;	float:left;	background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{	width:auto;	height:100%;	float:left;}#mainBox #topBanner #menu a{	display:block;	padding:8px;	width:115px;	background:url("res/bigbtn.png") repeat-x;	color:#C6C5C8;	line-height:100%;	text-decoration:none;	float:left;}HTML：  <div id="mainBox">	<div id="topBanner">		<div id="logo"></div>		<div id="menu">			<a id="liveBtn" href="javascript:;" title="LIVE SHOW">LIVE</a>			<a id="playbackBtn" href="javascript:;" title="PLAY BACK">PLAY BACK</a>			<a id="setupBtn" title="SET UP" href="javascript:;">SETTINGS</a>			<a id="logoutBtn" title="LOG OUT" href="javascript:;">LOG OUT</a>		</div>	</div></div>

具体表现为：IE7下

这段正常显示，IE8的时候

这段整体下沉了30px，IE9下

整体不显示。
图片上传不了（CSDN最近大姨妈太严重了）。 大致的效果是这样的。

IE7：/*logo*//*btn1*//*btn2*//*btn3*//*btn4*/          <=====正常效果IE8：/*logo*/     /*btn1*//*btn2*//*btn3*//*btn4*/        <=====下沉了30pxIE9：/*logo*/

3、请大家给介绍几个有关CSS布局的技术博客（由浅入深）和书籍。
4、第一次正面接触CSS，也不知道用什么工具，给介绍个常用的调试工具。
在此先谢过了。

回复讨论(解决方案)

补充一下：

#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}display属性是通过JS来动态改变成block的。

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

ie9浏览器已经有控制台 可以查看dom元素状态了 f12

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

你贴的这些全部都是以 CSS ID 选择器 命名的样式名.

CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;


至于你的问题

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)

贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

#mainBox #topBanner #menu
这种写法是不是 就是 CSS 后代选择器
http://www.w3school.com.cn/css/css_selector_descendant.asp

不是后代选择器
简单来说就是这几个id用的是同一个样式

#mainBox{    display:block;    margin-left:auto;    margin-right:auto;    width:940px;}#mainBox #topBanner{    display:none;    width:100%;    height:30px;    background:url("res/bannerBg.png") repeat-x;}#mainBox #topBanner #logo{    width:230px;    height:100%;    float:left;    background:url("res/logo.png") no-repeat;}#mainBox #topBanner #menu{    width:auto;    height:100%;    float:left;}

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

你贴的这些全部都是以 CSS ID 选择器 命名的样式名.

CSS ID 选择器 有以下属性
1.在一个 HTML文档中,ID 选择器仅仅会使用一次;
2.ID 选择器不能结合使用;


至于你的问题

那像这几个
mainBox ，topBanner ，menu，logo分别都是哪些属性呢？

这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他
但后代选择器用ID来定义 又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)

<!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" /><title>无标题文档</title><style type="text/css">div{margin:5px;}.t{background-color:#eee;width:200px;}.t .y{background-color:#ccc;}.t .y .o{background-color:#333;}.t .i{background-color:#999;}.t .i .o{background-color:#666;}.t #z{background-color:#FF5151;}.t #z #y{background-color:#000079;}.t #m{background-color:#8600FF;}.t #m #y{background-color:#642100;}</style></head><body><div class="t">t	<div class="i">i		<div class="o">o</div>	</div>	<div class="y">y		<div class="o">o</div>	</div>	<div id="z">z		<div id="y">y</div>	</div>	<div id="m">m		<div id="y">y</div><!--个人感觉不规范的-->	</div></div></body></html>

个人感觉不规范原因
1.与W3C CSSID选择器标准冲突;
2.CSS选择器也有权重的.