[英]pixel differences between opera, safari, FF and IE
我有以下代码:
<div id="search">
<form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
<input type="text" name="keyword" size="35" class="rounded" style="width: 320px;" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
<input id="searchSubmit" type="submit" value="" />
</form>
</div>
和
input.rounded {
border: 1px solid #ccc;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
font-size: 18px;
padding: 2px 7px;
outline: 0;
-webkit-appearance: none;
behavior: url(PIE.htc);
z-index:10;
}
input.rounded:focus {
border-color: #339933;
}
#searchSubmit{
background: transparent url(button_search.gif) no-repeat;
width: 21px;
height: 21px;
border: none;
cursor: pointer;
margin-left: -23px; /* image is 20x20px, so leave little extra */
margin-top: 2px; /* leave some space from the top, so button looks in the middle */
z-index:1;
}
编辑:这是提交按钮的链接: http : //traditionalirishgifts.com/button_search.gif
但我无法使“提交”按钮在FF,Opera,IE和Chrome中正确排列。 我尝试摆弄它,但是我不知所措。
解决此问题的唯一方法是浏览器被黑客入侵,然后我将在不同版本的浏览器之间遇到问题吗?
我对CSS进行了简化,使其更易于管理,并向您展示了我的方法:
<div id="search">
<form name="quick_find" action="index.php?main_page=advanced_search_result" method="get">
<input type="text" name="keyword" size="35" class="rounded" value="what are you looking for?" onfocus="if (this.value == 'what are you looking for?') this.value = '';" onblur="if (this.value == '') this.value = 'what are you looking for?';" />
<input id="searchSubmit" type="submit" value="" />
</form>
</div>
#search{
width:207px;
position:relative;
display:block;
border:1px solid #ccc;
}
input.rounded {
display:block;
width:180px;
height:30px;
border:0;
}
#searchSubmit{
display:block;
position:absolute;
left:180px;
top:5px;
background: red;
width: 20px;
height: 20px;
cursor: pointer;
}
您已经亲眼目睹了您采用的方法可能无法与跨浏览器兼容。
基本上,用边框设置#search div的样式。 相对放置input(text)元素,然后绝对放置Submit元素。 如果愿意,您可以相对定位这两个元素。
参见http://jsfiddle.net/KUWYY/1/
加
input{
vertical-align:middle;
}
并删除
#searchSubmit{
margin-top: 2px;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.