我试图让我的元素在小屏幕上的 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 一致?
最佳答案
我在这里看到了几个问题。
重置
首先,您必须知道每个浏览器在默认情况下会以不同方式显示各种元素。所以你的第一步是添加重置。你可以尝试类似的东西
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 阅读更多内容
关于html - 如何使我的输入在 Firefox 上与在 Chrome 上保持一致?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40048173/