我有一个按钮,经过测试here正在运行。 但在我的代码中,我尝试了一些修改,但没有任何作用。 图像如下所示,可以看到该按钮未正确显示。
我的完整代码如下所示,不确定是什么问题?在JSFiddle
上测试的问题可能是什么问题,但在webpage
无效?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css">
<style type="text/css">
#background {background: url(main_background.jpg);}
<!-- Top menu css -->
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
#maintopmenucontainer{
height:24px;
background:#000;
display:block;
padding:45px 0 0 15px;
}
#maintopmenu{
position:relative;
display:block;
height:24px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
}
#maintopmenu ul{
margin:0px;
padding:0;
list-style-type:none;
width:auto;
}
#maintopmenu ul li{
display:block;
float:left;
margin:0 1px 0 0;
}
#maintopmenu ul li a{
display:block;
float:left;
color:#fff;
text-decoration:none;
padding:5px 20px 0 20px;
height:19px;
background:transparent url(maintopmenu_bg-OFF.gif) no-repeat top left;
}
#maintopmenu ul li a:hover{
color:#fff;
background:transparent url(maintopmenu_bg-OVER.gif) no-repeat top right;
}
#maintopmenu ul li a.current,#foxmenu ul li a.current:hover{
color:#000;
background:#fff;
}
<!-- Top menu css -->
<!-- Drop Down Menu -->
fieldset {
border: 0;
}
label {
display: block;
margin: 30px 0 0 0;
}
select {
width: 150px;
}
.overflow {
height: 200px;
}
<!-- Drop Down Menu -->
.button {
position: absolute;
border-top: 1px solid #96d1f8;
background: #65a9d7;
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
to(#65a9d7) );
padding: 5px 10px;
border-radius: 4px;
box-shadow: rgba(0, 0, 0, 1) 0 1px 0;
text-shadow: rgba(0, 0, 0, .4) 0 1px 0;
color: white;
font-size: 19px;
font-weight: bold;
font-family: Segoe;
text-decoration: none;
vertical-align: middle;
display: block;
width: 200px;
text-align: center;
}
</style>
</head>
<body>
<hr />
<div id="maintopmenucontainer">
<div id="maintopmenu">
<ul>
<li><a href="#Landed" class="current"><span>Landed</span></a></li>
<li><a href="#Landed"><span>Apartment</span></a></li>
<li><a href="#Condominium"><span>Condominium</span></a></li>
<li><a href="#Commecial"><span>Commecial</span></a></li>
<li><a href="#Farm"><span>Farm</span></a></li>
</ul>
</div>
</div>
<div id="background">
<form name="Landed" id="Landed" method="post" >
<br /><br /><br />
<select name="divstate" id="divstate" >
<optgroup label="Divisions" selected="selected">
<option>Yangon</option>
<option>2</option>
<option>3</option>
</optgroup>
<optgroup label="States">
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</optgroup>
</select>
<select name="township" id="township" >
<option>Yangon</option>
<option>2</option>
<option>3</option>
<option>4</option>
</optgroup>
</select>
<input maxlength="100" type="text" name="min_price" id="min_price" placeholder="Minimum price"/>
<input maxlength="100" type="text" name="max_price" id="max_price" placeholder="Maximum price"/>
<a class="button" onclick="searchButtonAction()" id="search" href="#"><span>Search</span></a>
<br /><br /><br />
</form>
</div>
</body>
<script>
$(document).ready(function() {
$('.menu').dropit();
});
$('#max_price-error').css('display', 'block');
$('#max_price-error').html('Please enter to rent or to sell');
</script>
</html>
答案 0 :(得分:2)
background: -webkit-gradient(linear, left top, left bottom, from(#3e779d),
to(#65a9d7) );
background: linear-gradient(#3e779d, #65a9d7 );
你只有-webkit-渐变。添加正常的。