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

回复讨论(解决方案)

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:50 AM

下面代码，没加红色字体时，在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>

登录后复制

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

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

登录后复制

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn