gpt4 book ai didi

css - Opera、Safari、FF 和 IE 之间的像素差异

转载 作者:行者123 更新时间:2023-11-28 12:22:34 25 4
gpt4 key购买 nike

我有以下代码:

<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 中正确排列。我试过摆弄它,但我束手无策。

处理此问题的唯一方法是对浏览器进行黑客攻击,然后我会在不同版本的浏览器之间遇到问题吗?

Opera

Safari

Chrome

Firefox

最佳答案

我稍微简化了 CSS,使其更易于管理,并向您展示了我的方法:

http://jsfiddle.net/G8wcP/

<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 设置边框样式。相对定位输入(文本)元素,然后绝对定位提交元素。如果您愿意,您可以相对定位这两个元素。

关于css - Opera、Safari、FF 和 IE 之间的像素差异,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12269123/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com