Q&A
bootstrap4で以下のようなボタンを作成しました。
html
1<a type="button" class="btn btn-outline-primary nav-item nav-link rounded-0" href="#" role="button">サンプル</a>
html
1<div class="btn-group d-flex" role="group" aria-label="..."> 2 <a type="button" class="btn btn-outline-primary w-100 rounded-0" href="#" role="button">左</a> 3 <a type="button" class="btn btn-outline-primary w-100 rounded-0" href="#" role="button">真ん中</a> 4 <a type="button" class="btn btn-outline-primary w-100 rounded-0" href="#" role="button">右</a> 5</div>
パソコン及びgoogleChromの検証機能によるiPhone表示で閲覧した際には期待通りのボタンなのですが、実際に本番環境のiPhoneから閲覧すると、なぜか丸まってしまいます。
原因について分かる方がいましたら教えて頂きたいです。
よろしくお願いします。
回答1件
0
ベストアンサー
HTML
1<a class="btn btn-outline-primary nav-item nav-link rounded-0" href="#">サンプル</a>
と言うようにtype="button"を削除してみてください。手元のiPhoneとiPadではこれでうまくいきました。
a要素のtype属性はリンク先のMIMEタイプを助言するものです。例えば、リンク先がHTMLのページであれば、text/htmlを指定します。これは必須ではなく、また、ブラウザはその情報を過信してはいけません。(つまり、間違っていたとしても、それをもとにリンク先のコンテンツを決定すべきではない)
参考: HTML Living Standardおよび翻訳
つまり、input要素とは違って、ボタンだからと言ってtype="button"とする必要はありませんし、むしろ、ブラウザはリンク先がbuttonというMIMEタイプ(そんなものはありません)と解釈すべきであり、ボタンであるという情報に何の足しにもなっていません。単に無視されるべき情報と言えますが、設定しない、または、リンク先のMIMEタイプを設定するのが正しいとなります。決してtype="button"としてはいけません。
さて、そこで問題はどうしてこんな感じになるのかと言うことです。各ブラウザのソースコードまでは追っていないので、ここからは推測になります。
BootStrapはいくつかのモジュールから構成されています。その中に標準的な表示にするRebootというもの(ファイル名としては_reboot.scssであり、Normalize.cssを元にしている)というのがあります。そこには、次のようなCSSが設定されています。
CSS
1[type=reset], [type=submit], button, html [type=button] { 2 -webkit-appearance: button; 3}
classを指定しない標準状態で、ボタンがボタンの表示になるようにするためのようです。type="button"が設定されていたら、ボタンになるようにと言うことなのですが、input要素のみを指定するというものでありません。つまり、質問のようなコードのa要素もこのCSSの対象となってしまいます。どうやら、これが悪さをしているらしいです。input要素であれば、その後のrounded-0で指定されている方が優先されるはずなのですが、無理矢理しているせいか、Safariでは変なボタンとして認識されてしまい、指定が別のものになってしまうようです。Safariのバグと言うより、想定していないCSSの使われ方と言った方が良いかもしれません。
投稿2019/12/30 04:57
総合スコア21735
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/12/30 05:08
2019/12/30 06:24
退会済みユーザー
2019/12/30 11:51