質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

364閲覧

IEで表示が崩れる件について

seakai

総合スコア24

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

Internet Explorer

Internet Explorer(IE;MSIE)はマイクロソフトが開発したウェブブラウザです。Microsoft Windowsに組み込まれています。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/06/14 20:48

編集2021/06/14 23:02

前提・実現したいこと

下記の画像1の状態にしたいです。
chrome時

が、IEではこうなります。
IE

ご教授いただければ幸いです。

該当のソースコード

php

1<ul class="flow_list"> 2 <li class="flow_list-item"> 3 <div class="flow_list-item-number-box"> 4 <p class="flow_list-item-number">01</p> 5 </div> 6 <div class="flow_list-item-text-box"> 7 <h5 class="flow_list-item-title">お問い合わせ</h5> 8 <p class="flow_list-item-text">まずはフォームまたはお電話からお申し込みください。</p> 9 </div> 10 </li> 11... 12</ul>

scss

1.flow_list-item { 2 margin-top: 1.5rem; 3 background-color: $moreThinGray; 4 display: flex; 5 flex-direction: column; 6 @include spc { 7 display: block; 8 } 9} 10.flow_list-item-number-box { 11 display: inline-block; 12 background-color: $yellowOrange; 13 width: 4rem; 14 height: 4rem; 15 @include spc { 16 width: 6.4rem; 17 height: 6.4rem; 18 } 19} 20.flow_list-item-number { 21 height: 100%; 22 display: flex; 23 justify-content: center; 24 align-items: center; 25 font-weight: bold; 26 line-height: 1.8; 27 font-size: 1.6rem; 28} 29.flow_list-item-text-box { 30 display: inline-block; 31} 32.flow_list-item-title { 33 padding-left: 1rem; 34 font-weight: bold; 35 font-size: 1.8rem; 36 display: block; 37 line-height: 2.2; 38 @include spc { 39 display: inline-block; 40 border-right: 1px solid #C3C3C3; 41 width: 21.4rem; 42 padding-left: 2.5rem; 43 } 44} 45.flow_list-item-text { 46 line-height: 1; 47 padding-left: 1rem; 48 font-size: 1.4rem; 49 display: block; 50 padding-bottom: 2rem; 51 @include spc { 52 display: inline-block; 53 padding-left: 5.5rem; 54 font-size: 1.6rem; 55 } 56}

試したこと

参考サイト
(https://ameblo.jp/dnow/entry-11172318010.html)
(https://qiita.com/kiyoami/items/74f2fb1c30d475d35144)
から下記のように修正しましたが、変わりませんでした。

scss

1.flow_list-item { 2list-style-type: none; 3list-style-position:outside; 4*display:inline; 5*zoom:1; 6vertical-align: top; 7}

こちらのサイトの「閉じるタグを無くしてしまう」以外も試してみましたがだめでした。
どうかご教授お願い致します。 (編集済み)

補足情報(FW/ツールのバージョンなど)

scssを使っています。

追記

イメージ説明

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

m.ts10806

2021/06/14 21:12

SCSSそのままよりコンパイル後のCSSを提示されたほうが良いと思います。 ただ、IEはもう終わるので今から頑張って対応しても、とは思いますが。
Orlofsky

2021/06/14 22:59

IEもEdgeもサポート外と明言しておいた方が貴社のWebエンジニアの阿鼻叫喚が少なくなります。
seakai

2021/06/14 23:03

ありがとうございます。 これが解決しなければそうしようと思います…
guest

回答1

0

ベストアンサー

基本方針としては、

  • li要素がflexになっているので、align-items: center;をつけてフレックスボックス内の子要素を上下中央揃えにする
  • 子要素のheight, padding, marginなど上下方向にサイズが伸びそうなプロパティを削除
  • div.flow_list-item-number-boxも中のp要素を中央寄せにするため、flex指定し、align-itemsjustify-contentをcenterに設定。

このくらいの修正でIEもだいたい同じように表示することができるようになります。
IEスクショ

codepenでのデモ
IE11で見るには、上記のpenをforkし、DebagModeで表示されるURLで開いてください。
素のままのcodepenはIE11をブロックします。

投稿2021/06/14 22:30

編集2021/06/14 22:31
hope_mucci

総合スコア4447

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

seakai

2021/06/14 23:02

回答ありがとうございます。 まずcodepenのcssをコピペしてみると、chrome表示で追記のようになりました。
hope_mucci

2021/06/15 06:36 編集

penのscssは元のscssをかなり改変しています。(主に変数やレスポンシブの部分。削除しないと動作しないため) そのままコピペしても意図通り動作しないと思います。差分をよく見て、増減したプロパティがどのような動きを行うのか見極めたうえでプロパティを移植、削除してください。
seakai

2021/06/15 10:24

codepenでのコードをヒントに、なんとか思い通りの形になりました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問