CSS控制前台样式在360和chrome的兼容问题,跪求高手帮忙,在线等,,,,,,,_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:50:20
Original
1011 Leute haben es durchsucht

下面代码,没加红色字体时,在360和chrome分别是第一张和第二张图的效果,
加了红色字体后,在360和chrome分别是第三张和第四张图的效果
我就是想做个搜索框的下拉框,产品列表紧靠着上面的输入框就好,可是在不同的浏览器效果还不同,郁闷





nbsp;html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">










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



  • onmouseover="mo(this.value)">产品1
  • onmouseover="mo(this.value)">产品2
  • onmouseover="mo(this.value)">产品3
  • onmouseover="mo(this.value)">产品4










回复讨论(解决方案)

<!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>
Nach dem Login kopieren


定位没有掌握好,好好看看定位这一块多练习就懂了……

<!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>
Nach dem Login kopieren

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!