Question

我试图找出在iPhone或任何移动设备上查看时我的CSS在我的按钮上发生变化的原因;然而，它在桌面上看起来很好，即使我重新调整窗口大小。我的按钮上的样式与桌面上的样式不同。我甚至在不同的互联网浏览器中看到了这个。救命？这是网站。 http://matthew.myspanishslang.com/

<h1 id="contact-us">Let us know something!</h1>
<form class="cf">
  <div class="half left cf">
    <input type="text" id="input-name" placeholder="Name">
    <input type="email" id="input-email" placeholder="Email address">
    <input type="text" id="input-subject" placeholder="Subject">
  </div>
  <div class="half right cf">
    <textarea name="message" type="text" id="input-message" placeholder="Message"></textarea>
  </div>
  <input type="submit" value="Submit" id="input-submit">
</form>

和我的CSS

#contact-us {
  font-size: 1.0em;
  text-align: center;
  color: #a8a8a8;
  text-shadow: 1px 1px 0 white;
}
form {
  background: #f1f1f1;
  padding: 1em;
  max-width: 600px;
  text-align: center;
  margin: 20px auto;
}
form input, form textarea {
  border: 0;
  outline: 0;
  padding: 1em;
  -moz-border-radius: 8px;
  -webkit-border-radius: 8px;
  border-radius: 8px;
  display: block;
  width: 100%;
  margin: auto;
  margin-top: 1em;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  resize: none;
}
form input:focus, form textarea:focus {
  -moz-box-shadow: 0 0px 2px #e74c3c !important;
  -webkit-box-shadow: 0 0px 2px #e74c3c !important;
  box-shadow: 0 0px 2px #e74c3c !important;
}
form #input-submit {
  color: white;
  background: #e74c3c;
  cursor: pointer;
}
form #input-submit:hover {
  -moz-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  -webkit-box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
  box-shadow: 0 1px 1px 1px rgba(170, 170, 170, 0.6);
}
form textarea {
  height: 126px;
}

.half {
  float: left;
  width: 48%;
  margin-bottom: 1em;
}

.right {
  width: 50%;
}

.left {
  margin-right: 2%;
}

@media only screen and (max-width: 725px) {
  form input, form textarea {
    width: 70%;
  }
}

@media (max-width: 480px) {
  .half {
    width: 100%;
    float: none;
    margin-bottom: 0;
  }
}
/* Clearfix */
.cf:before,
.cf:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

.cf:after {
  clear: both;
}

Answer 1

如果你的问题是iOS用它自己替换你的按钮样式，你可能应该考虑在你的代码中添加以下行，正如我在这篇文章中所建议的那样。

class ItemProvider

  attr_reader :keyword, :filters

  FACET_CONTENT_TO_SEARCH = %w[summary description]

  def initialize(keyword, filters)
    @keyword = keyword
    @filters = filters
  end

  def retrieve
    @items = Item.all

    filter_by_keyword
    filter_items
  end

  private

  def filter_by_keyword
    return @items if keyword.blank?

    @items = @items
      .joins(:facets)
      .where('facets.identifier' => FACET_CONTENT_TO_SEARCH)
      .where('items.label LIKE ? OR facets.content LIKE ?', "%#{keyword}%", "%#{keyword}%").uniq
  end

  def filter_items
    return @items if filters.blank?

    filters_to_hash.each do |filter, value|
      @items = Item
      .unscoped
      .select("items.*")
      .joins("INNER JOIN facets ON facets.facetable_id = items.id AND facets.facetable_type = 'Item'")
      .where('facets.identifier' => filter)
      .where('facets.content' => value)
    end
  end

  def filters_to_hash
    filters.reduce({}) do |acc, filter|
      if acc[filter[:identifier]]
        acc[filter[:identifier]] << filter[:value]
      else
        acc[filter[:identifier]] = [filter[:value]]
      end
      acc
    end
  end
end

CSS submit button weird rendering on iPad/iPhone

我的按钮上的CSS与桌面到移动设备有所不同吗？

1 个答案: