[英]CSS not working for button appearence - Internet Explorer
I Have the following HTML and CSS for the current scenerio: 我有当前场景的以下HTML和CSS:
As you can see, the search textbox and the filter dropdown are appearing perfectly in-line. 正如您所看到的,搜索文本框和过滤器下拉列表完全符合要求。 But the button is appearing down.
但按钮出现了。
Here is the HTML code for all the 3 controls: 以下是所有3个控件的HTML代码:
<table>
<tbody>
<tr>
<td>
<div class="search_result_div">
<div>
<input type="text" style="width:200px;" id='searchButton' value="some text"><span> in </span>
<select id="filterDropdown">
<option value="all" selected="selected">All Areas</option>
<option value="docs">Documents</option>
</select>
<a onclick="return callSearch();" class="btn" id="searchButton" href="../sys/SearchResults.aspx?q="><span>Search</span></a>
</div>
</div>
</td>
</tr>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
Here is the CSS for all the controls: 这是所有控件的CSS:
.search_result_div a.btn
{
background: url("/images/bg_btn_left.gif") no-repeat scroll left center transparent;
display: inline !important;
float: none;
font-size: 11px !important;
line-height: 21px !important;
margin: 0 !important;
outline: medium none;
padding: 3px 0 3px 2px !important;
text-indent: inherit !important;
}
.search_result_div a.btn span
{
background: url("/images/bg_btn.gif") no-repeat scroll right center transparent;
font-weight: bold !important;
margin: 0 !important;
padding: 4px 8px 4px 6px !important;
}
Note: The button is divided into two images. 注意:该按钮分为两个图像。
bg_btn_left.gif : bg_btn_left.gif:
bg_btn: bg_btn:
Please suggest where am I going wrong? 请告诉我哪里出错了?
Thanks 谢谢
Its one of the problems I had to go through myself. 这是我必须经历的问题之一。 I think I solved it by setting all default margins and paddings to zero.
我想我通过将所有默认边距和填充设置为零来解决它。 See if that helps you.
看看这对你有帮助。
*{margin:0px; padding:0px;}
or if its a problem of aligning use 或者如果它是一个对齐使用的问题
vertical-align: middle;
For inline elements, you can use the vertical-align: middle; 对于内联元素,您可以使用vertical-align:middle; CSS property to align verticaly.
CSS属性以对齐verticaly。
看看这里是: http : //jsfiddle.net/YUXxf/你的代码是按照你的意愿工作但我认为图像有一个更大的顶部边框向下推动图像..
我总是将这个css文件css.reset添加到我的项目中,以确保我不使用浏览器定义的默认css设置。
Hey i think you should give to some properties your .search_result_div a.btn
嘿,我认为你应该给你的
.search_result_div a.btn
一些属性
as like this 像这样
input{
vertical-align:top;
}
.search_result_div a.btn{
display:inline-block;
vertical-align:top;
*display:inline; // for ie
}
Try this: 试试这个:
<style type="text/css">
.search_result_div a.btn
{
background: url("bg_btn_left.gif") no-repeat scroll left top transparent;
display: inline !important;
float: none;
font-size: 11px !important;
line-height: 21px !important;
margin: 0 !important;
outline: medium none;
padding: 4px 0 3px 2px !important;
text-indent: inherit !important;
}
.search_result_div a.btn span
{
background: url("bg_btn.gif") no-repeat scroll right top transparent;
vertical-align:top;
font-weight: bold !important;
margin: 0 !important;
padding: 4px 8px 4px 6px !important;
}
</style>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.