search

Home >Web Front-end >HTML Tutorial >CSS control front-end style compatibility issue between 360 and chrome, begging experts for help, waiting online,,,,,,,_html/css_WEB-ITnose

CSS control front-end style compatibility issue between 360 and chrome, begging experts for help, waiting online,,,,,,,_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 11:50:201058browse

The following code, without adding red fonts, is the effect of the first and second pictures in 360 and chrome respectively.
After adding red fonts, it is the third and fourth pictures respectively in 360 and chrome The effect of the picture
I just want to make a drop-down box for the search box, with the product list next to the input box above, but the effect is different in different browsers, which is frustrating





7dbae950fec47d4baf649a20351858b7
68ccb177a5de0ef9542dde7d35bae727
93f0f5c25f18dab9d176bd4f6de5d30e
99afeef876b288f81257fc90ad75e1de
daee65cea63af063278cd59ca1e900be
5c9541f39c07a0c0f4314522f74c7d73
080b747a20f9163200dd0a7d304ba388
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;
}
74e107ac60256a5e268d6d598f0bdef1
9c3bca370b5104690d9ef395f2c5f8d1
6c04bd5ca3fcae76e30b72ad730ca86d
924ff17625d603f964501dd897c96cc6
6d56f9059ddbbfc7e51a002031de1465
e22b628d830506af4234da738dcbdd31
6a9bdb869329e86a03303809873d8d3d
62aa956098b366e6c026523e3520a9b5
b58d3f84e7bbc328041a666653b6ff46
ae781edc6fcf8cf6c876375bd25d0232
cdf7018a7bf67f5682611d79ea661733Product 1bed06894275b65c1ab86501b08a632eb
f159856b2bb29489fb94238b7c4a1a9bProduct 2bed06894275b65c1ab86501b08a632eb
a863c12390ccbbf090456ab92ce1b5d8Product 3bed06894275b65c1ab86501b08a632eb
f8de59ca6d759e0f994edf2b5aa7eb60Product 4bed06894275b65c1ab86501b08a632eb
929d1f5ca49e04fdcb27f9465b944689
16b28748ea4df4d9c2150843fecfba68
f5a47148e367a6035fd7a2faa965022e
16b28748ea4df4d9c2150843fecfba68
16b28748ea4df4d9c2150843fecfba68
d0b0ddf5c8db2d865e87cfa738d4c5a0
16b28748ea4df4d9c2150843fecfba68

36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e


Reply Discussion (Solution) 

<!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>


I have not mastered the positioning well. Take a good look at the positioning and practice more... 

<!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>

Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：In selenium, how to make the scroll bar scroll to the height of the specified page element Link finishing_html/css_WEB-ITnoseNext article：In selenium, how to make the scroll bar scroll to the height of the specified page element Link finishing_html/css_WEB-ITnose

Related articles

See more