html - 如何使我的输入在 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
Normalize
Super Form 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 阅读更多内容