html - Mac 与 Windows 的 CSS 问题

Question

我一直在为搜索栏设计一个表单，但遇到了一个问题。在我的 Windows PC 上，我看到搜索栏是我编码的方式，但当我在 Mac 上查看时，它的宽度不同。

(均使用谷歌浏览器)

Windows(我想要的样子)

Mac(我希望它和 Windows 一样)

HTML:

    

     

     

      
<input type="text"class="searchBar"size="40"/><input type="button"value="SEARCH"class="searchButton"/>
      

     
     

    

CSS

#searchBox {width:368px;height:45px;background:url(../images/gradient.png) #333;border-radius:5px;float:left;}

#searchBarHold {填充:7px;}

.searchBar {padding:5px;width:border-radius:3px;border:none;}

.searchButton {height:27px;border-left:1px #f98923 solid;border-right:1px #f98923 solid;border-bottom:1px #f9b233 solid;border-top:1px #ffd797 solid;background:#f9b233;color: #fff；边框半径:3px；字体粗细:900；}

Answer 1

看起来您使用的是固定宽度。您可以在这里做一些事情。

1) 使您的文本输入和按钮输入固定宽度，以便它们占用您的搜索框的必要空间(记住要考虑填充/边距)

2) 从您的 searchBox 中移除宽度，使其与其中的 child 一样宽。