韓国留学、ベルリン短期ワーホリ、転職、Webデザイン、英語勉強、旅行、食べ物、ディズニーなど

Formのbuttonの高さがFirefoxで揃わない!!崩れを直すまでの道のり

現在制作中のサイトで、サイト内検索フォームを設置しているのですが、Chromeで作っていて完成したと思ったら、Firefoxで崩れていました・・・。
これを直すのに、かなり苦労してしまったので、メモしたいと思います。

完成は、こちらの検索フォームです。

フォーカス時には、薄い紫色になります。

それが、Firefoxでは、このように、サーチアイコンのあるボタンの部分の高さが、検索ワードを入力するテキストフィールドよりも高くなっていて、ボタンの方が下にはみ出てしまいました。

HTMLは、以下の通り。

<div class="search-area" id="search">
 <form action="#" method="post" class="wrapper-simple">
  <input type="search" name="q" value="" placeholder="キーワードから記事を探す" class="search-area__text">
 </form>
</div>

そしてCSSは、もともと以下の通り記載していました。※Sassで記述しています。

//検索フォーム
.search-area {
  margin-top: 30px;
  margin-right: 12px;
}
.search-area form {
  position: relative;
}
.search-area__text {
  position: relative;
  display: inline-block;
  background-color: #fff;
  height: 30px;
  border: 1px solid #ddd;
  @include border-radius(3px);
  @include box-sizing(border-box);
  @extend %fz12;
  color: #333;
  width: 250px;
  padding: 0 50px 0 8px;
  &:focus {
    outline: none;
    background: $lightPurple;
  }
}

//Safari用
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}

//サーチアイコンとボタンの装飾
.search-area__button {
  position: absolute;
  background-color: #fff;
  border: none;
  padding: 0;
  width: 60px;
  top: 0;
  right: 1px;
  display: inline-block;
  height: 30px;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  @include border-radius(0 3px 3px 0);
  cursor: pointer;
  &:focus {
    background: #fff;
  }
}
.search-area__button span {
  font-size: 16px;
  color: #999;
  display: block;
  width: 50px;
  margin: 0 auto;
}

最初はinput要素やbutton要素のheightを調整したりしていました。
上のソースコードでは、input要素の高さを30pxに設定しているのですが、そうするとChromeとSafariでは、30pxと上下のborder1pxずつで、全体の高さは32pxになり、Firefoxでは、すべて合わせても30pxになっています。

それに合わせて、button要素も同じ高さにしたいのですが、Chrome、Safariではbutton要素の高さを32pxに設定するとぴったりで、FireFoxでは、30pxに設定するとぴったりとなります。2px(上下のborder分)のズレが発生してしまうのです。
Firefoxのズレを直すためにheightの値を変えるだけでは、Chromeで高さが足りなくなってしまいました。

そこで、inputもbuttonも両方、displayをinline-blockにし、inputのline-heightを30px、heightを30pxにし、
buttonの、line-heightを30px、heightをautoにしました。

さらに、「inputのズレを揃えるCSSまとめ」のサイトを発見し、こちらのコードを記述しました。


body, form {
     margin:0;
     padding:0;
     border:0;
     outline:0;
     font-size:100%;
     vertical-align:baseline;
     background:transparent;
}

select, input, textarea, button { 
     vertical-align:middle; 
     font-family:"MS Pゴシック", arial, helvetica, clean, sans-serif; 
     position:relative; 
     margin: 0 4px 2px 0;
     *margin-right:3px; 
     top:-1px;  
}

input { 
     height: 16px; 
     line-height: 16px; 
}

button, input[type="button"] {
     overflow:visible; 
     height:22px;
     padding:0 3px;
}

select { 
     height: 20px; 
     line-height: 20px;
}

input[type="checkbox"],
input[type="radio"] { 
     border:none; 
     top:-2px;
     top:0\9;
     margin-right:2px; 
     margin-right: 0\9; 
}

ボタン部分のposition:absoluteで位置をしている部分の、top:0は取りました。
もともとのCSSは、このようになりました。(変えた部分のみ)


.search-area__text {
  position: relative;
  display: inline-block;
  background-color: #fff;
  line-height: 30px;
  height: auto;
  border: 1px solid #ddd;
  @include border-radius(3px);
  @include box-sizing(border-box);
  @extend %fz12;
  color: #333;
  width: 250px;
  padding: 0 50px 0 8px;
  &:focus {
    outline: none;
    background: $lightPurple;
  }
}
//サーチアイコンとボタンの装飾
.search-area__button {
  position: absolute;
  background-color: #fff;
  border: none;
  padding: 0;
  width: 60px;
  right: 1px;
  display: inline-block;
  line-height: 30px;
  height: auto;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  @include border-radius(0 3px 3px 0);
  cursor: pointer;
  &:focus {
    background: #fff;
  }
}

そうすると、今度は、Chromeはinputもbuttonも高さが32pxなのに、Firefoxはinputの高さが30px、buttonの高さが、34pxになっていました。

Firefoxでは、このように、サーチアイコンのあるボタンの部分の高さが、検索ワードを入力するテキストフィールドよりも高くなっていて、ボタンの方が下にはみ出てしまいました。
Firefoxのbuttonだけ大きくなる問題です。

html – Why is Firefox button larger? – Stack Overflow」のサイトに載っているとおり、下記のコードを記述しました。

button::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner {
     padding: 0 !important;
     border: 0 none !important;
 }

すると、Firefoxのbuttonが32pxになりました。inputは30pxのままなので、まだ崩れています。
(Chromeは変化なし、崩れてもいない状態です。)
あと2pxです!!

2pxってborder分なので、やっぱりbox-sizing: content-box;が怪しいと思い、もともと書いていたコードの、

//Safari用
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}

この部分に、ベンダープレフィックスなしの
box-sizing:content-box;
を追記したら、ついに直りました!!!!!!

なので、最終的なCSSは、以下の通りになりました。

//検索フォーム
.search-area {
  margin-top: 30px;
  margin-right: 12px;
}
.search-area form {
  position: relative;
}
.search-area__text {
  position: relative;
  display: inline-block;
  background-color: #fff;
  line-height: 30px;
  height: auto;
  border: 1px solid #ddd;
  @include border-radius(3px);
  @include box-sizing(border-box);
  @extend %fz12;
  color: #333;
  width: 250px;
  padding: 0 50px 0 8px;
  &:focus {
    outline: none;
    background: $lightPurple;
  }
}

//Safari用
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
}

//サーチアイコンとボタンの装飾
.search-area__button {
  position: absolute;
  background-color: #fff;
  border: none;
  padding: 0;
  width: 60px;
  right: 1px;
  display: inline-block;
  line-height: 30px;
  height: auto;
  border-left: 1px solid #ddd;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  @include border-radius(0 3px 3px 0);
  cursor: pointer;
  &:focus {
    background: #fff;
  }
}
.search-area__button span {
  font-size: 16px;
  color: #999;
  display: block;
  width: 50px;
  margin: 0 auto;
}

参考にさせていただいたサイト様のコードのおかげで、崩れを直すことができました。
あとは、heightではなく、line-heightで高さを指定することと、box-sizing:content-box;(ベンダープレフィックスあり・なし版)を記述すること、display:inline-block;が鍵でした。

【参考サイト】
「inputのズレを揃えるCSSまとめ」
「html – Why is Firefox button larger? – Stack Overflow」

スポンサーリンク

内容をご確認の上、「送信」ボタンを押してください。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください