求大神帮忙找下不同浏览器css兼容性问题,附网址,代码,在线等_html/css_WEB-ITnose
程序员文章站
2022-05-18 14:59:56
...
求大神帮忙找下不同浏览器css兼容性问题,附网址,代码,在线等......
给单位做了给网站,遇到兼容性问题,求帮助!
导航问题:IE8下,正常模式和兼容模式都没问题了。现在360极速模式下或者ie8以下版本出现:
1、导航条错位,跑马灯不自己出,鼠标移动到首页下跑马灯从中间出。
2、板块边框变粗。
在线等!!!请大神帮忙!!!
http://szw.qj.gov.cn
导航条css代码如下:
*{margin:0px; padding:0px;}
#nav {
height:50px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:0; display:inline;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap; display:table-cell;
}
#nav li {
float:left; padding:0 0 0 0;background:url(blank_over_p.gif); display:inline;
}
#nav .select a {
display:block; height:48px; float:left; background: url(blank_p.gif); padding:0 0 0 10px; text-decoration:none; line-height:25px; white-space:nowrap; color:#fff;text-align:center;
}
#nav .select li:active {background:url(blank_p.gif) right top;
}
#nav .select a b {
display:block; padding:0 23px 10px 10px; background:url(blank_p.gif) right top;text-align:center;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 10px; line-height:27px; cursor:pointer; color:#eee;text-align:center;
}
#nav .select li:hover a b {
display:block; padding:0 23px 9px 10px; background:url(blank_over_p.gif) right top; cursor:pointer; text-align:center;
}
#nav .sub {
display:none;margin:0;list-style:none; text-align:center;
}
#nav .sub li {background:transparent;text-align:center;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; width:1020px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:22px; line-height:20px; float:left; background:transparent url(transparent.gif); padding:0 18px; margin:0; white-space:nowrap; border:1px solid #fff; border-color:#888 #777 #666 #ddd; color:#333;font-size:13px; text-align:center;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px; text-align:center;}
首页css代码如下:
.t1 {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
.t2 {
FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
.kj1 {
BORDER-RIGHT: #6c4824 1px solid; BORDER-LEFT: #6c4824 1px solid; BORDER-TOP-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.t3 {
FONT-SIZE: 12px; COLOR: #53371c; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"
}
.bk {
BORDER-BOTTOM: #663333 1px dotted
}
.bk1 {
BORDER-BOTTOM: #cccccc 1px dotted
}
.t4 {
FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
BODY { COLOR: #666666; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 10pt; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR:
#F5F9FF; SCROLLBAR-SHADOW-COLOR: #828282; SCROLLBAR-3DLIGHT-COLOR: #828282; SCROLLBAR-ARROW-COLOR:
#797979; SCROLLBAR-TRACK-COLOR: #ECECEC; SCROLLBAR-DARKSHADOW-COLOR: #ffffff }
A:link { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A:visited { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A:hover { COLOR: #0099FF; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A:active { COLOR: #336699; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:link { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:visited { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:hover { COLOR: #eeeeee; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A.white:active { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:link { COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:visited { COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:hover { COLOR: #ff9900; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A.blue:active { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
TABLE { COLOR: #ffffff; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 9pt; LINE-HEIGHT:15px }
TABLE.Mtable3 TD { BORDER-BOTTOM: #425d8c 1px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #91b0d7 1px solid }
TABLE.Mtable2 TD { BORDER-BOTTOM: #bedafe 1px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid }
TABLE.Mtable1 TD { BORDER-BOTTOM: #bedafe 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid }
.list { BACKGROUND-COLOR: #990000; COLOR: #ffffff; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 12px }
.textboxLINE_1 { BACKGROUND-COLOR: #D6F7FF;
BORDER-BOTTOM: #b4b4b4 1px double;
BORDER-LEFT: #b4b4b4 0px double;
BORDER-RIGHT: #b4b4b4 0px double;
BORDER-TOP: #b4b4b4 0px double }
.textbox { BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #b4b4b4 1px double;
BORDER-LEFT: #b4b4b4 1px double;
BORDER-RIGHT: #b4b4b4 1px double;
BORDER-TOP: #b4b4b4 1px double }
.Bbutton { BACKGROUND-COLOR: #D6F7FF;
BORDER-BOTTOM: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-RIGHT: #ff0000 1px double;
BORDER-TOP: #ff0000 1px solid; FONT-SIZE: 9pt; HEIGHT: 13pt;color:#990000}
.style2 {font-family: "????"; font-size:10pt;}
给单位做了给网站,遇到兼容性问题,求帮助!
导航问题:IE8下,正常模式和兼容模式都没问题了。现在360极速模式下或者ie8以下版本出现:
1、导航条错位,跑马灯不自己出,鼠标移动到首页下跑马灯从中间出。
2、板块边框变粗。
在线等!!!请大神帮忙!!!
http://szw.qj.gov.cn
导航条css代码如下:
*{margin:0px; padding:0px;}
#nav {
height:50px; position:relative; font-family:arial, verdana, sans-serif; font-size:11px;z-index:0; display:inline;
}
#nav .select {
margin:0; padding:0; list-style:none; white-space:nowrap; display:table-cell;
}
#nav li {
float:left; padding:0 0 0 0;background:url(blank_over_p.gif); display:inline;
}
#nav .select a {
display:block; height:48px; float:left; background: url(blank_p.gif); padding:0 0 0 10px; text-decoration:none; line-height:25px; white-space:nowrap; color:#fff;text-align:center;
}
#nav .select li:active {background:url(blank_p.gif) right top;
}
#nav .select a b {
display:block; padding:0 23px 10px 10px; background:url(blank_p.gif) right top;text-align:center;
}
#nav .select li:hover a {
background: url(blank_over_p.gif); padding:0 0 0 10px; line-height:27px; cursor:pointer; color:#eee;text-align:center;
}
#nav .select li:hover a b {
display:block; padding:0 23px 9px 10px; background:url(blank_over_p.gif) right top; cursor:pointer; text-align:center;
}
#nav .sub {
display:none;margin:0;list-style:none; text-align:center;
}
#nav .sub li {background:transparent;text-align:center;}
#nav .select li:hover .sub {
height:18px; display:block; position:absolute; width:1020px; top:28px; left:0; text-align:center;
}
#nav .select li:hover .sub li a {
display:block;height:22px; line-height:20px; float:left; background:transparent url(transparent.gif); padding:0 18px; margin:0; white-space:nowrap; border:1px solid #fff; border-color:#888 #777 #666 #ddd; color:#333;font-size:13px; text-align:center;
}
#nav .select li:hover .sub li a:hover {
color:#000; background:#e8e8e8; border-color: #fff #333 #000 #fff; line-height:15px; text-align:center;}
首页css代码如下:
.t1 {
FONT-WEIGHT: normal; FONT-SIZE: 12px; COLOR: #ffffff; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
.t2 {
FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
.kj1 {
BORDER-RIGHT: #6c4824 1px solid; BORDER-LEFT: #6c4824 1px solid; BORDER-TOP-STYLE: none; BORDER-BOTTOM-STYLE: none
}
.t3 {
FONT-SIZE: 12px; COLOR: #53371c; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"
}
.bk {
BORDER-BOTTOM: #663333 1px dotted
}
.bk1 {
BORDER-BOTTOM: #cccccc 1px dotted
}
.t4 {
FONT-SIZE: 12px; COLOR: #333333; LINE-HEIGHT: 15px; FONT-FAMILY: "Arial", "Helvetica", "sans-serif"; TEXT-DECORATION: none
}
BODY { COLOR: #666666; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 10pt; MARGIN: 0px; SCROLLBAR-HIGHLIGHT-COLOR:
#F5F9FF; SCROLLBAR-SHADOW-COLOR: #828282; SCROLLBAR-3DLIGHT-COLOR: #828282; SCROLLBAR-ARROW-COLOR:
#797979; SCROLLBAR-TRACK-COLOR: #ECECEC; SCROLLBAR-DARKSHADOW-COLOR: #ffffff }
A:link { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A:visited { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A:hover { COLOR: #0099FF; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A:active { COLOR: #336699; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:link { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:visited { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.white:hover { COLOR: #eeeeee; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A.white:active { COLOR: #FFFFFF; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:link { COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:visited { COLOR: #ff0000; FONT-SIZE: 9pt; TEXT-DECORATION: none }
A.blue:hover { COLOR: #ff9900; FONT-SIZE: 9pt; TEXT-DECORATION: underline }
A.blue:active { COLOR: #ffffff; FONT-SIZE: 9pt; TEXT-DECORATION: none }
TABLE { COLOR: #ffffff; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 9pt; LINE-HEIGHT:15px }
TABLE.Mtable3 TD { BORDER-BOTTOM: #425d8c 1px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #91b0d7 1px solid }
TABLE.Mtable2 TD { BORDER-BOTTOM: #bedafe 1px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid }
TABLE.Mtable1 TD { BORDER-BOTTOM: #bedafe 0px solid; BORDER-LEFT: #ffffff 0px solid; BORDER-RIGHT: #ffffff 0px solid; BORDER-TOP: #ffffff 0px solid }
.list { BACKGROUND-COLOR: #990000; COLOR: #ffffff; FONT-FAMILY: "??¨¬?"; FONT-SIZE: 12px }
.textboxLINE_1 { BACKGROUND-COLOR: #D6F7FF;
BORDER-BOTTOM: #b4b4b4 1px double;
BORDER-LEFT: #b4b4b4 0px double;
BORDER-RIGHT: #b4b4b4 0px double;
BORDER-TOP: #b4b4b4 0px double }
.textbox { BACKGROUND-COLOR: #ffffff;
BORDER-BOTTOM: #b4b4b4 1px double;
BORDER-LEFT: #b4b4b4 1px double;
BORDER-RIGHT: #b4b4b4 1px double;
BORDER-TOP: #b4b4b4 1px double }
.Bbutton { BACKGROUND-COLOR: #D6F7FF;
BORDER-BOTTOM: #ff0000 1px solid;
BORDER-LEFT: #ff0000 1px solid;
BORDER-RIGHT: #ff0000 1px double;
BORDER-TOP: #ff0000 1px solid; FONT-SIZE: 9pt; HEIGHT: 13pt;color:#990000}
.style2 {font-family: "????"; font-size:10pt;}
回复讨论(解决方案)
*网站啊 , 告诉你个不幸的消息 ,谷歌,火狐打开页面都左浮动了 . 根本没居中 。 估计最新版本的浏览器都不会居中。 就兼容IE了.?
firefox下面二级菜单都跑在内容上面去了,整个网页都在左边。1 网页外面套个大DIV ,弄居中 2 nav菜单的子菜单写进Li里面去,或者放不同的DIV里去也行,用js动态的加载
好像都是用table 布局的,先在 css 里,让页面居中吧
table{margin: 0 auto;}
页面居中搞定了,还有很多兼容性问题,我看挨个解决是不能了,开始自学div+css了,改天把网站全改了!
多年没搞网站了,这个首页模板还是我09年写的,当时没这么多浏览器,只在IE上弄,没注意过兼容性问题,现在我就擦了,360打开一个样儿,ie打开一个样儿,最恼火的是火狐打开彻底激怒我了。提醒网站新手们,先学div+css再做网站吧。