Home >Web Front-end >HTML Tutorial >Please help me find the css compatibility issues of different browsers. Attached are URLs, codes, online, etc._html/css_WEB-ITnose
Please help me find the css compatibility issues in different browsers, including URL, code, online, etc...
I made a website for my company and encountered compatibility issues, please help. !
Navigation problem: Under IE8, there is no problem in normal mode and compatibility mode. Now it appears in 360 speed mode or in versions below IE8:
1. The navigation bar is misaligned and the marquee does not appear by itself. Move the mouse to the home page and the marquee will appear from the middle.
2. The plate border becomes thicker.
Waiting online! ! ! Please help me! ! !
http://szw.qj.gov.cn
The navigation bar css code is as follows:
*{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;}
The css code of the home page is as follows:
.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 { 3bb3ba5d8a8c1e677360c9d603cb067b 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;}
The page has been centered, but there are still many compatibility issues. I don’t think we can solve them one by one. I started to learn div css by myself, and I will change the entire website one day!
I haven’t created a website for many years. I wrote this homepage template in 2009. There weren’t so many browsers at that time. I only created it on IE and didn’t pay attention to compatibility issues. Now I’ve deleted it and opened it in 360 It looks the same when I open it on IE. The most annoying thing is that when I open Firefox, it completely irritates me. Remind website novices to learn div css first before making a website.