紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~-CSDN论坛

⋅大家以后还是不要发"呵呵"了！！！！！！！！！！！！！有图有真相 ⋅紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~ ⋅大姨妈又来了，还是一直处在血崩，没好！！！！！！ 更多帖子 关注私信空间博客 浩南_哥 本版专家分：2 红花 2011年8月 Delphi大版内专家分月排行榜第一 2011年5月 Delphi大版内专家分月排行榜第一 黄花 2011年9月 Delphi大版内专家分月排行榜第二 2011年7月 Delphi大版内专家分月排行榜第二 2011年6月 Delphi大版内专家分月排行榜第二 2011年4月 Delphi大版内专家分月排行榜第二 结帖率 100%

昨天临时接了个任务，修改个网页的前端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下<div menu></div>这段正常显示，IE8的时候<div menu></div>这段整体下沉了30px，IE9下<div menu></div>整体不显示。
图片上传不了（CSDN最近大姨妈太严重了

）。大致的效果是这样的。



IE7：/*logo*//*btn1*//*btn2*//*btn3*//*btn4*/          <=====正常效果

IE8：/*logo*/

     /*btn1*//*btn2*//*btn3*//*btn4*/        <=====下沉了30px

IE9：/*logo*/

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

0 2014-12-09 09:02:09

回复数 9 只看楼主引用举报楼主

⋅大家以后还是不要发"呵呵"了！！！！！！！！！！！！！有图有真相 ⋅紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~ ⋅大姨妈又来了，还是一直处在血崩，没好！！！！！！ 更多帖子 关注私信空间博客 浩南_哥 本版专家分：2 红花 2011年8月 Delphi大版内专家分月排行榜第一 2011年5月 Delphi大版内专家分月排行榜第一 黄花 2011年9月 Delphi大版内专家分月排行榜第二 2011年7月 Delphi大版内专家分月排行榜第二 2011年6月 Delphi大版内专家分月排行榜第二 2011年4月 Delphi大版内专家分月排行榜第二

补充一下：



#mainBox #topBanner{

    display:none;

    width:100%;

    height:30px;

    background:url("res/bannerBg.png") repeat-x;

}

display属性是通过JS来动态改变成block的。

0 2014-12-09 09:08:18

只看TA 引用举报 #1 得分 0

⋅min-height 的不兼容 ⋅min-height 的不兼容 ⋅轮播问题 更多帖子 关注私信空间博客 滴滴月空雨 本版专家分：2003: 贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

0 2014-12-09 11:28:33

只看TA 引用举报 #2 得分 30

⋅终于完成了小目标还是买不起房只能散分

⋅最近论坛页面体验很不好

⋅合上电脑发现四周空无一人突然有感而发

更多帖子

关注私信空间博客

kk3k2005

本版专家分：51337

签到新秀 累计签到获取，不积跬步，无以至千里，继续坚持！

黄花 2013年11月 Web 开发大版内专家分月排行榜第二

蓝花 2013年10月 Web 开发大版内专家分月排行榜第三: ie9浏览器已经有控制台可以查看dom元素状态了 f12

0 2014-12-09 11:33:21

只看TA 引用举报 #3 得分 20

⋅大家以后还是不要发"呵呵"了！！！！！！！！！！！！！有图有真相 ⋅紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~ ⋅大姨妈又来了，还是一直处在血崩，没好！！！！！！ 更多帖子 关注私信空间博客 浩南_哥 本版专家分：2 红花 2011年8月 Delphi大版内专家分月排行榜第一 2011年5月 Delphi大版内专家分月排行榜第一 黄花 2011年9月 Delphi大版内专家分月排行榜第二 2011年7月 Delphi大版内专家分月排行榜第二 2011年6月 Delphi大版内专家分月排行榜第二 2011年4月 Delphi大版内专家分月排行榜第二: 引用 2 楼 liyuedan 的回复:
贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试

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

0 2014-12-09 11:42:26

只看TA 引用举报 #4 得分 0

⋅min-height 的不兼容 ⋅min-height 的不兼容 ⋅轮播问题 更多帖子 关注私信空间博客 滴滴月空雨 本版专家分：2003: 引用 4 楼 m617105 的回复:
Quote: 引用 2 楼 liyuedan 的回复:

贴出的代码咱看不出什么，，只能猜测是，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用的是同一个样式

0 2014-12-09 11:58:34

只看TA 引用举报 #5 得分 0

⋅大家以后还是不要发"呵呵"了！！！！！！！！！！！！！有图有真相 ⋅紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~ ⋅大姨妈又来了，还是一直处在血崩，没好！！！！！！ 更多帖子 关注私信空间博客 浩南_哥 本版专家分：2 红花 2011年8月 Delphi大版内专家分月排行榜第一 2011年5月 Delphi大版内专家分月排行榜第一 黄花 2011年9月 Delphi大版内专家分月排行榜第二 2011年7月 Delphi大版内专家分月排行榜第二 2011年6月 Delphi大版内专家分月排行榜第二 2011年4月 Delphi大版内专家分月排行榜第二

引用 5 楼 liyuedan 的回复:

Quote: 引用 4 楼 m617105 的回复:

Quote: 引用 2 楼 liyuedan 的回复:

贴出的代码咱看不出什么，，只能猜测是，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分别都是哪些属性呢？

0 2014-12-09 13:34:57

只看TA 引用举报 #6 得分 0

⋅正则表达式如何能区分大小写符号？ ⋅JS遍历困惑 ⋅更新cookie值。 更多帖子 关注私信空间博客 Mafia 本版专家分：3820

引用 6 楼 m617105 的回复:

Quote: 引用 5 楼 liyuedan 的回复:

Quote: 引用 4 楼 m617105 的回复:

Quote: 引用 2 楼 liyuedan 的回复:

贴出的代码咱看不出什么，，只能猜测是，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来定义又没有任何意义.
所以我说他这套命名是不太规范的(个人意见)

0 2014-12-09 13:53:09

只看TA 引用举报 #7 得分 50

⋅正则表达式如何能区分大小写符号？ ⋅JS遍历困惑 ⋅更新cookie值。 更多帖子 关注私信空间博客 Mafia 本版专家分：3820

引用 7 楼 webyellow 的回复:

Quote: 引用 6 楼 m617105 的回复:
Quote: 引用 5 楼 liyuedan 的回复:

Quote: 引用 4 楼 m617105 的回复:

Quote: 引用 2 楼 liyuedan 的回复:

贴出的代码咱看不出什么，，只能猜测是，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选择器也有权重的.

0 2014-12-09 14:03:52

只看TA 引用举报 #8 得分 0

⋅正则表达式如何能区分大小写符号？ ⋅JS遍历困惑 ⋅更新cookie值。 更多帖子 关注私信空间博客 Mafia 本版专家分：3820

引用楼主 m617105 的回复:

昨天临时接了个任务，修改个网页的前端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下<div menu></div>这段正常显示，IE8的时候<div menu></div>这段整体下沉了30px，IE9下<div menu></div>整体不显示。
图片上传不了（CSDN最近大姨妈太严重了）。大致的效果是这样的。
IE7：/*logo*//*btn1*//*btn2*//*btn3*//*btn4*/          <=====正常效果

IE8：/*logo*/

     /*btn1*//*btn2*//*btn3*//*btn4*/        <=====下沉了30px

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

问题2:不兼容
首先如果你用display属性想兼容IE8以下,那么个人建议你是使用none/block/inline...属性值.
1.IE7正常说明是老项目哦.
2.IE8整体下沉30PX,应该是浮动(float)的问题.
3.IE9整体不显示?这个就不明白了.

好.
下面我说一下2的float用法
如果是新手且对代码质量要求不高,
直接这么写.
<div class="大盒子">
<div style="float:left">向左浮动</div>
<div style="float:right">向右浮动</div>
<div style="clear:both"></div>
</div>

还有一种写法,可以避免多余的清除DOM.也就是把大盒子定义成display:inline-block;或overflow:auto;还有zoom:1;还有after伪类等.

好,下面解决兼容问题,还得自己写样式在不同浏览器测试哦.具体语法.
http://www.cnblogs.com/WuQiang/archive/2011/08/23/2150240.html

0 2014-12-09 14:28:51

只看TA 引用举报 #9 得分 0

紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~ [问题点数：100分，结帖人m617105]