在Safari中按钮太低但在Chrome和Firefox中没问题

时间:2016-02-25 00:43:45

标签: css safari

我有两个输入,一个按钮假设在一个div中。我已经在这三个元素中使用了内联块。但是,Safari中的按钮太低,但在Chrome和Firefox中没问题。任何人都知道如何解决它?

<div class="simple-search">
<div class="keywords search-element">
  <label for="simple_search_key">Key</label><br>
  <input placeholder="e.g. " type="text" name="simple_search[keywords]" id="simple_search_keywords">
</div>
<div class="location search-element">
  <label for="simple_search_Location">Location</label><br>
  <input placeholder="e.g. " type="text" name="simple_search[location]" id="simple_search_location">
</div>
<div class="actions search-element primary-button">
  <input type="submit" name="commit" value="Search">
</div>

Here is what it looks like:

.primary-button {
  background-color: lime;
  box-sizing: border-box;
  border-radius: 4px;
}
.primary-button :hover {
  background-color: lime;
  cursor: pointer;
}
.primary-button input {
  background-color: transparent;
  color: white !important;
}
.primary-button.disabled {
  background: #ecf7e2;
  pointer-events: none;
  cursor: default;
}

.simple-search {
  margin: 0 auto;
  text-align: center;
  width: 80%;
  background-color: rgba(0, 0, 0, 0.3);
  border-radius: 8px;
  height: 80px;
  padding: 2.2em 2.5em;
}

.search-element {
  display: inline-block;
  margin: 10px;
  line-height: 2;
  width: 30%;
  margin-top: -5px;
}
.search-element label {
  color: white;
  float: left;
}
.search-element input {
  border: none;
  border-radius: 4px;
  color: blue;
  font-size: 1.5em;
  height: 30px;
  margin-top: .25em;
  padding: .75em;
  outline: none;
  width: 96%;
}
.search-element.primary-button {
  height: 60px;
}
.search-element.primary-button input {
  height: 52px;
}

.results {
  margin: 13px;
  padding: 2.2em 10.5em;
}
.results .search-result {
  margin: 10px;
  margin-left: 0px;
  margin-bottom: 30px;
}
.results .search-result .job-title {
  font-size: 3ex;
  margin-bottom: 10px;
}
.results .search-result .company-name, .results .search-result .location, .results .search-result .date {
  display: inline-block;
  margin-right: 10px;
}
.results .search-result .company-name {
  font-family: monospace;
  font-size: large;
}

0 个答案:

没有答案