私は正常に動作している2つのチェックボックスを得たが、私はいくつかのCSSの問題に直面します。チェックボックスを標準フォーマットで使用するにはどうしたらいいですか?
私はGoogleのクロム55.0.2883.87
とMicrosoftエッジ38.14393.0.0
の1に(一つのMozillaでFirefoxの50.1.0
、1を見ているかの3枚のスクリーンショットを作りました):
のFirefox:
クローム:
エッジ:
完全なHTMLは(何のクラスを持っていない)body要素の内側にあります。 <html>
タグは、これらのクラスを持っているが、私にはありません関連性があるとお考えください:
js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths
HTML:
<div class="container">
<form>
<span data-bind="visible: $data">
<fieldset class="well">
<div class="row form-group">
<div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: HasNoCodeBarreUnique"})</div>
<div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
</div>
<div class="row form-group">
<div class="col-md-1 vcenter">@Html.CheckBoxFor(..., new {@class = "form-control pull-left", @data_bind = "checked: IsInSystemeRemboursementReference" })</div>
<div class="col-md-11 vcenter">@Html.LabelFor(..., new {@class = "control-label"})</div>
</div>
</fieldset>
</span>
</form>
</div>
私は、C#のmodelプロパティとirrelevantsクラスのどちらかを意図的に省略しました。私はちょうどのような標準的なチェックボックスたい
.vcenter {
float: none;
display: inline-block;
vertical-align: middle;
margin-right: -4px;
}
:
すべてのクラスがさえずりブートストラップ-3からですが、のvCenter
を、どのように標準形式で私のチェックボックスをレンダリングします?
。あなたがそれぞれのスタイルを一貫して持たせたい場合は、そのスタイルを作成する必要があります。 – Craicerjack
私は各ブラウザに独自のレンダリングスタイルがあることを知っていますが、この場合はデフォルトの動作ではありません。なぜか –
"カスタムチェックボックス"を検索すると、独自のチェックボックスをカスタマイズする方法がたくさんあります。これは、ブラウザ間で標準化する唯一の方法です。 – pshep123