紧急求助！！！！！！！标题要长~~~~~~~~~~~~~~~~~

浩南_哥 2014-12-09 09:02:09

昨天临时接了个任务，修改个网页的前端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，也不知道用什么工具，给介绍个常用的调试工具。
在此先谢过了。

...全文

240 9 打赏收藏转发到动态举报

写回复

用AI写文章

9 条回复

切换为时间正序

请发表友善的回复…

发表回复

滴滴月空雨 2014-12-09

打赏
举报

引用 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[/quote] 不是后代选择器简单来说就是这几个id用的是同一个样式

浩南_哥 2014-12-09

打赏
举报

引用 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

KK3K2005 2014-12-09

打赏
举报

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

滴滴月空雨 2014-12-09

打赏
举报

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

浩南_哥 2014-12-09

打赏
举报

补充一下：


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

daswcszxw 2014-12-09

打赏
举报

引用楼主 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

daswcszxw 2014-12-09

打赏
举报

引用 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[/quote] 不是后代选择器简单来说就是这几个id用的是同一个样式[/quote]


#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分别都是哪些属性呢？[/quote] 你贴的这些全部都是以 CSS ID 选择器命名的样式名. CSS ID 选择器有以下属性 1.在一个 HTML文档中,ID 选择器仅仅会使用一次; 2.ID 选择器不能结合使用; 至于你的问题那像这几个 mainBox ，topBanner ，menu，logo分别都是哪些属性呢？这个是后代选择器的写法.所以是选择作为某元素后代的元素.比如logo,把他定义到DIV/SPAN上面,SPAN/DIV就用上了他但后代选择器用ID来定义又没有任何意义. 所以我说他这套命名是不太规范的(个人意见) [/quote]


<!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选择器也有权重的.

daswcszxw 2014-12-09

打赏
举报

引用 6 楼 m617105 的回复:

[quote=引用 5 楼 liyuedan 的回复:] [quote=引用 4 楼 m617105 的回复:] [quote=引用 2 楼 liyuedan 的回复:] 贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试


#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;
}

浩南_哥 2014-12-09

打赏
举报

引用 5 楼 liyuedan 的回复:

[quote=引用 4 楼 m617105 的回复:] [quote=引用 2 楼 liyuedan 的回复:] 贴出的代码咱看不出什么，，只能猜测是，a引起的，，#mainBox #topBanner #menu a设置一下margin:0;line-height:0;试试


#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分别都是哪些属性呢？