1
CSSを使って簡単なグリッドシステムを作成しようとしています。ここにはpage at CodePenがあります。 CSSのコードは次のとおりです。CSSグリッドの列はChromeやFirefoxでは浮動しませんが、IEやEdgeでは浮動しません。
/*
* light blue = 00AEEF
* dark blue = 1C75BC
* green = 8DC63F
* dark green = 009444
* orange = F7941E
* dark orange = F15A29
* brown = 594A42
*/
/***************************
****************************
Reset Styles
****************************
***************************/
@import 'normalize.css'
/* Change all elements to use border-box */
html{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
*, *:before, *:after{
box-sizing: inherit;
}
/***************************
****************************
Base Styles
****************************
***************************/
body{
color: #414042 /* Dark Grey */
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
}
h1, h2, h3{
font-weight: bold;
}
a{
color: #8dc63f; /* Green */
font-weight: bold;
}
a:hover{
text-decoration: underline;
}
/***************************
****************************
Layout Styles
****************************
***************************/
.container{
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
max-width: 1170px;
}
.row{
margin-right: -15px;
margin-left: -15px;
}
/* ":after" is a pseudo-element (NOT a pseudo-class) */
.row::after{
content: "";
display: table;
clear: both;
}
/* This targets all classes that contain the word "col-" */
[class*='col-']{
width: 100%;
padding-left: 15px;
padding-right: 15px;
}
/* Media query excludes extra-small devices and includes small and above */
@media (min-width: 48em) {
[class*='col-']{
float: left;
}
/* Column One Third */
.col-1-3{
width: 33.3333%;
background: red;
}
/* Column Two Thirds */
.col-2-3{
width: 66.6666%;
background: blue;
}
}
/***************************
****************************
Module Styles
****************************
***************************/
/***************************
****************************
Theme Styles
****************************
***************************/
.background-primary{
background: #F7941E; /* Orange */
}
.background-secondary{
background: #00AEEf; /* Blue */
}
.background-tertiary{
background: #8DC63F; /* Green */
}
HTMLコードは次のとおりです。IEでは
<header class="background-primary">
<div class="container">
Header Content
</div>
</header>
<main>
<section class="background-secondary">
<div class="container">
Hero Primary Content
</div>
</section>
<section>
<div class="container">
<div class="row">
<div class="col-1-3">
Circle Image
</div>
<div class="col-2-3">
Content Area
</div>
</div> <!-- End row -->
</div> <!-- End Container -->
</section>
<section>
<div class="container">
Featured Content
</div>
</section>
<section class="background-primary">
<div class="container">
Testimonial Content
</div>
</section>
<section class="background-secondary">
<div class="container">
Media Objects
</div>
</section>
<section class="background-tertiary">
<div class="container">
More Content
</div>
</section>
</main>
<footer class="background-primary">
<div class="container">
Footer Content
</div>
</footer>
とエッジ、「サークルイメージ」の両方と「コンテンツ領域」は期待通りに浮かぶと水平に表示されます。しかし、ChromeやFirefoxで見ると、縦に積み重ねられます（少なくとも私の側では）。私はこれがパディングのせいだと思っていますが、他のブラウザが失敗している間にIEが正しく処理できるのはなぜですか？これは既知のエラーですか？
（これは素朴な質問であればごめんなさい、私はWeb開発に新たなんだ）
：そうのようなノートはありますが、Bootstrap 4は正式にはfloats/clearfixではなく、レイアウトグリッド用のFlexboxを正式に使用しています。おかげさまで、https://github.com/twbs/bootstrap/pull/21389 – Derek