如何使我的输入在Firefox上与在Chrome上相同？

Question

我试图让我的元素在Firefox的小屏幕上正确对齐(我正在使用Mac El Capitan).我有这些元素

<div id="searchContainer">
<h1>Search For Race Results:</h1>
<form id="search-form" action="/races/search" accept-charset="UTF-8" method="get"><input name="utf8" value="?" type="hidden">
<input name="first_name" id="first_name" value="Dave" placeholder="First Name" type="text">
<input name="last_name" id="last_name" value="" placeholder="Last Name" type="text">
<input name="event" id="event" value="" placeholder="Event" type="text">
<input alt="Search" src="http://www.racertracks.com/assets/magnifying-glass-0220f37269f90a370c3bb60229240f2ef2a4e15b335cd42e64563ba65e4f22e4.png" class="search_button" type="image">
</form></div>

我有这些风格来调整事物

#first_name,
#last_name {
  width: 40%;
  /*make the width like event so all the input fields looks good*/
} 

#event {  
  width: 100%;
}

#last_name,
#event {
  margin-left: 2px;
}

#event {
  margin-right: 2px;
} 

input.search_button {
  /* Search-button will be center when meda screen < 400px */
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

@media only screen and (max-width: 400px) {
  /*set the max width 400px so they will wrap after the media screen reach 400px*/
  #search-form {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
  }

  #first_name {
    width: calc(50% - 8px);
    margin: 0;
  }

  #last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
  }

  #first_name,
  #last_name {
    margin-bottom: 1px;
  }

  #event {
    width: calc(100% - 35px);
    margin-right: 2px;
  }
}

但请注意,当我在Firefox上将屏幕压缩到小于400像素的大小时,这些元素并不像Chrome上那样很好地包装,这就是我想要的 - https://jsfiddle.net/7z662891/2/.我需要做些什么才能使我的Firefox排列行为像Chrome一样？

Answer 1

我在这看到几个问题.

复位

首先,您必须注意每个浏览器默认会以不同方式显示各种元素.所以你的第一步是添加重置.你可以试试像

Meyerweb
规范化
超级表格Reset.css

表格造型

为要保持一致的事物添加特定样式.否则你将获得默认值.

数学

尽量不要混合px和%.例如,您使用过

#last_name {
    width: calc(50% - 8px);
    margin-left: 2px;
}

而是试试

#last_name {
    width: 48%;
    margin-left: 1%;
}

因为当您将它们并排放置时,所有内容都需要添加或低于100%.

另请注意,calc许多旧版浏览器不支持此功能.您可以在https://developer.mozilla.org/en-US/docs/Web/CSS/calc上阅读更多内容.