您的位置: 首页  >  IT文章  >  CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，

CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，

分类: IT文章 • 2022-05-02 12:36:22
CSS控制前台样式在360和chrome的兼容问题，跪求高手帮忙，在线等，，，，，，，
下面代码，没加红色字体时，在360和chrome分别是第一张和第二张图的效果，
加了红色字体后，在360和chrome分别是第三张和第四张图的效果
我就是想做个搜索框的下拉框，产品列表紧靠着上面的输入框就好，可是在不同的浏览器效果还不同，郁闷
CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，
CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，
CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，
CSS控制前台样式在360和chrome的兼容有关问题，跪求高手帮忙，

<!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=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=7">
<link rel="shortcut icon" href="./images/favicon.ico">
<style type="text/css">
body {
background: #f1f2f6;
overflow: hidden;
font-family: microsoft yahei;
}

.ulclass {
margin-left: 280px;
margin-top: -3px;
border: 1px solid #000;
list-style: none;
width: 308px;
padding: 0px;
}

.selectclass {
background: #36C;
font-size: 12px;
color: #FFF;
}

.selectclass span {
color: #FFF;
}

.liclass {
line-height: 16px;
font-size: 12px;
padding: 2px;
}

.spanclass {
float: right;
font-size: 12px;
color: #008000;
margin-top: -18px;
}

.header {
width: 980px;
height: 95px;
margin: 0px auto 10px;
overflow: visible;
zoom: 1;
}

.header .searchBox {
width: 350px;
margin-top: 40px;
float: right;
background-color: #f1f2f6;
border: none;
border-radius: 5px;
overflow: visible;
}

.header .searchBox .input_text {
border: 1px solid #dfdfdf;
border-right: none;
height: 18px;
line-height: 18px;
margin: 0px;
width: 300px;
font-size: 14px;
font-weight: bold;
background: #fff;
float: left;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
padding: 10px 0 10px 10px;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-shadow: none;
display: inline-block;
text-align: start;
font-family: Tahoma, Helvetica, 'SimSun', sans-serif;
}

.header .searchBox .input_button {
border: 1px solid #00a0e5;
border-left: none;
height: 40px;
width: 38px;
padding: 0px;
margin: 0px;
background: #00a0e5 url(../images/search_bg.png);
float: left;
border: none;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
box-shadow: none;
}

.header .suggest {
position: relative;
right: 279px;
top: -17px;
z-index: 9999;
}

.navfixed {
width: 100%;
height: 50px;
line-height: 50px;
margin-top: 10px;
background: #00a0e5;
overflow: hidden;
}
</style>
</head>
<body>
<div class="header">
<div class="searchBox">
<form action="./search/index.jsp" method="post" name="search"
autocomplete="off">
<input class="sText input_text" type="text" name="keyword"
id="keywordid" placeholder="输入应用名称搜索" onkeyup="keyupevent(event);" />
<input class="sSubmit input_button" type="submit" value="">
<div class="suggest">
<ul class="ulclass">
<li class="liclass" value="1" onclick="form_submit()"
onmouseover="mo(this.value)">产品1</li>
<li class="liclass" value="2" onclick="form_submit()"
onmouseover="mo(this.value)">产品2</li>
<li class="liclass" value="3" onclick="form_submit()"
onmouseover="mo(this.value)">产品3</li>
<li class="liclass" value="4" onclick="form_submit()"
onmouseover="mo(this.value)">产品4</li>
</ul>
</div>
</form>
</div>
</div>
<div id="mainnav" class="navfixed">
</div>

</body>
</html>
------解决思路----------------------
<!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=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=7">

<link rel="shortcut icon" href="./images/favicon.ico">

<style type="text/css">

body {

background: #f1f2f6;

overflow: hidden;

font-family: microsoft yahei;

}


.ulclass {


border: 1px solid #000;

list-style: none;

width: 308px;

padding: 0px;

margin:0;

}


.selectclass {

background: #36C;

font-size: 12px;

color: #FFF;

}


.selectclass span {

color: #FFF;

}


.liclass {

line-height: 16px;

font-size: 12px;

padding: 2px;

}


.spanclass {

float: right;

font-size: 12px;

color: #008000;

margin-top: -18px;

}


.header {

width: 980px;

height: 95px;

margin: 0px auto 10px;

overflow: visible;

zoom: 1;

}


.header .searchBox {

width: 350px;

margin-top: 40px;

float: right;

background-color: #f1f2f6;

border: none;

border-radius: 5px;

overflow: visible;

position:relative;

}


.header .searchBox .input_text {

border: 1px solid #dfdfdf;

border-right: none;

height: 18px;

line-height: 18px;

margin: 0px;

width: 300px;

font-size: 14px;

font-weight: bold;

background: #fff;

float: left;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

padding: 10px 0 10px 10px;

letter-spacing: normal;

word-spacing: normal;

text-transform: none;

text-shadow: none;

display: inline-block;

text-align: start;

font-family: Tahoma, Helvetica, 'SimSun', sans-serif;

}


.header .searchBox .input_button {

border: 1px solid #00a0e5;

border-left: none;

height: 40px;

width: 38px;

padding: 0px;

margin: 0px;

background: #00a0e5 url(../images/search_bg.png);

float: left;

border: none;

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

box-shadow: none;

}


.header .suggest {

position:absolute;

top:38px;

left:0;

z-index: 9999;

}


.navfixed {

width: 100%;

height: 50px;

line-height: 50px;

margin-top: 10px;

background: #00a0e5;

overflow: hidden;

}

</style>

</head>

<body>

<div class="header">

<div class="searchBox">

<form action="./search/index.jsp" method="post" name="search"

autocomplete="off">

<input class="sText input_text" type="text" name="keyword"

id="keywordid" placeholder="输入应用名称搜索" onkeyup="keyupevent(event);" />

<input class="sSubmit input_button" type="submit" value="">


</form>

<div class="suggest">

<ul class="ulclass">

<li class="liclass" value="1" onclick="form_submit()"

onmouseover="mo(this.value)">产品1</li>

<li class="liclass" value="2" onclick="form_submit()"

onmouseover="mo(this.value)">产品2</li>

<li class="liclass" value="3" onclick="form_submit()"

onmouseover="mo(this.value)">产品3</li>

<li class="liclass" value="4" onclick="form_submit()"

onmouseover="mo(this.value)">产品4</li>

</ul>

</div>

</div>


</div>

<div id="mainnav" class="navfixed">

</div>


</body>

</html>


定位没有掌握好，好好看看定位这一块多练习就懂了……
------解决思路----------------------
<!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=utf-8">

<meta http-equiv="X-UA-Compatible" content="IE=7">

<link rel="shortcut icon" href="./images/favicon.ico">

<style type="text/css">

body {

background: #f1f2f6;

overflow: hidden;

font-family: microsoft yahei;

}


.ulclass {

margin-left: 0px;

margin-top: 0px;

border: 1px solid #000;

list-style: none;

width: 308px;

padding: 0px;

position: absolute;

background: #FFF;

}


.selectclass {

background: #36C;

font-size: 12px;

color: #FFF;

}


.selectclass span {

color: #FFF;

}


.liclass {

line-height: 16px;

font-size: 12px;

padding: 2px;

}


.spanclass {

float: right;

font-size: 12px;

color: #008000;

margin-top: -18px;

}


.header {

width: 980px;

height: 95px;

margin: 0px auto 10px;

overflow: visible;

zoom: 1;

}


.header .searchBox {

width: 350px;

margin-top: 40px;

float: right;

background-color: #f1f2f6;

border: none;

border-radius: 5px;

overflow: visible;

}


.header .searchBox .input_text {

border: 1px solid #dfdfdf;

border-right: none;

height: 18px;

line-height: 18px;

margin: 0px;

width: 300px;

font-size: 14px;

font-weight: bold;

background: #fff;

float: left;

border-top-left-radius: 4px;

border-bottom-left-radius: 4px;

padding: 10px 0 10px 10px;

letter-spacing: normal;

word-spacing: normal;

text-transform: none;

text-shadow: none;

display: inline-block;

text-align: start;

font-family: Tahoma, Helvetica, 'SimSun', sans-serif;

}


.header .searchBox .input_button {

border: 1px solid #00a0e5;

border-left: none;

height: 40px;

width: 38px;

padding: 0px;

margin: 0px;

background: #00a0e5 url(../images/search_bg.png);

float: left;

border: none;

border-top-right-radius: 4px;

border-bottom-right-radius: 4px;

box-shadow: none;

}


.header .suggest {

position: relative;

z-index: 9999;

  float:left;padding-right: 100%;

}


.navfixed {

width: 100%;

height: 50px;

line-height: 50px;

margin-top: 10px;

background: #00a0e5;

overflow: hidden;

}

</style>

</head>

<body>

<div class="header">

<div class="searchBox">

<form action="./search/index.jsp" method="post" name="search"

autocomplete="off">

<input class="sText input_text" type="text" name="keyword"

id="keywordid" placeholder="输入应用名称搜索" onkeyup="keyupevent(event);" />

<input class="sSubmit input_button" type="submit" value="">

<div class="suggest">

<ul class="ulclass">

<li class="liclass" value="1" onclick="form_submit()"

onmouseover="mo(this.value)">产品1</li>

<li class="liclass" value="2" onclick="form_submit()"

onmouseover="mo(this.value)">产品2</li>

<li class="liclass" value="3" onclick="form_submit()"

onmouseover="mo(this.value)">产品3</li>

<li class="liclass" value="4" onclick="form_submit()"

onmouseover="mo(this.value)">产品4</li>

</ul>

</div>

</form>

</div>

</div>

<div id="mainnav" class="navfixed">

</div>


</body>

</html>

相关推荐