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

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

ただいまの
回答率

90.85%

  • Windows 10

    784questions

    Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

  • Google

    489questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。

Windows10のchromeでレイアウトが崩れてしまいます。

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 134

UKYO9311

score 2

タイトル通りですが、Windows10でレイアウトが崩れてしまいます。
バージョンは1709です。

IEでは崩れていませんがchromeで崩れてしまっています。
色々調べてみたのですが、原因が分かりませんでした。

崩れていると言っても、一箇所改行されてしまっているとかですが...。
何か原因として可能性がある事はありますでしょうか?

表示されるIE
バージョン 11.37116299.0
更新バージョン 11.0.60

表示されないchrome
バージョン 66.0.3359.181

<div class="c-searchBlock1">
            <div class="c-searchBlock1__title">
                <i class="c-icon c-icon--i65-1"></i>
                <p>フリーワードで検索する :</p>
            </div>
            <div class="c-searchBlock1__input">
                <div class="c-search">
                    <input type="text" class="search" value="" placeholder="エリアから検索">
                    <button><i class="c-icon c-icon--i72-2"></i></button>
                </div>
            </div>
/* 検索入力
------------------------------------------------------------*/
.c-searchBlock1 {
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .c-searchBlock1 {
    background: #EFF1F0;
    margin-top: 0;
    margin-bottom: 0;
    border-bottom: 1px solid #CFCFCF;
    padding: 20px 11px;
    display: block;
  }
}

.c-searchBlock1__title {
  display: flex;
  align-items: center;
  overflow: hidden;
}

.c-searchBlock1__title i {
  width: 18px;
  height: 18px;
  margin-right: 5px;
}

.c-searchBlock1__title p {
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .c-searchBlock1__title {
    display: none;
  }
}

.c-searchBlock1 .c-search {
  width: 560px;
}

@media screen and (max-width: 767px) {
  .c-searchBlock1 .c-search {
    width: auto;
  }
}

.c-searchBlock1 .c-search input {
  width: 520px;
  height: 35px;
  font-size: 1.4rem;
}

@media screen and (max-width: 767px) {
  .c-searchBlock1 .c-search input {
    width: calc(100% - 40px);
    margin-left: 0;
  }
}

.c-searchBlock1 .c-search button {
  width: 40px;
  height: 35px;
}

.c-searchBlock1 .c-search button svg {
  width: 20px;
}

@media screen and (max-width: 767px) {
  .c-searchBlock1 .c-search button {
    width: 13%;
  }
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • sk_3122

    2018/05/21 10:31 編集

    あるブラウザでは意図した通りに表示されるけれど、別のブラウザでは崩れる、といったことは正直よくあることなので、「具体的なHTML&CSSのソース(そのままのソースでは無くて良いので最低限 現象が再現するもの)」「OS」「崩れる&崩れないブラウザとそのバージョン」などを書かないとなかなか回答が付きづらいのではないかなと思います。

    キャンセル

  • UKYO9311

    2018/05/21 11:18

    コメント、ご指摘ありがとうございます! 情報を追加しました。よろしくお願い致します。

    キャンセル

  • sousuke

    2018/05/21 11:21

    「一箇所改行されてしまっているとか」この内容を正確に言わないと回答者が違いを探さないといけなくなるので不親切です。IEだとここがこうだがChromeだとこうなると明言してください。

    キャンセル

  • sk_3122

    2018/05/21 13:10 編集

    「一箇所改行されてしまっているとか」そうですね、具体的に「IE の場合はここがこうなっているが、Chrome の場合はこうなっている」のような書き方をしないと分かり辛いですね。提示されたHTML&CSSをコピペしてみたところ、崩れているという現象はぱっと見分かりませんでした。もし「画面サイズが広い場合はくずれないが、画面サイズを狭くするとChromeだけ段落ちする」などであれば 単純にフォントが違うからでは?と思いましたが… とりあえず、どこがどうなっているのかを具体的に書くと良いと思います。スクリーンショットを貼っても良いと思います。

    キャンセル

回答 1

0

Chrome だと <td> 内での文章内での区切りによる改行(句読点や - によって、単語の途中でも分割することがある)が、他と挙動が異なって行の長さが違ってしまい、結果デザインが崩れるってことがありました。
結局 <td> の中にさらに <div> で囲って回避したことがありますが……

どういう HTML+CSS で、どう崩れているのかが分かりませんので、多分に推測しかできませんが。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2018/05/21 11:19

    回答ありがとうございます!ソースを追加致しました。

    キャンセル

  • 2018/05/21 13:22

    実際にソースを元に最小限のコードで試してみましたが、別に普通に表示しますね…?
    IE でも Chrome でも Firefox でも挙動に違いはありません。

    キャンセル

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

  • ただいまの回答率 90.85%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • Windows 10

    784questions

    Windows 10は、マイクロソフト社がリリースしたOSです。Modern UIを標準画面にした8.1から、10では再びデスクトップ主体に戻され、UIも変更されています。PCやスマホ、タブレットなど様々なデバイスに幅広く対応していることが特徴です。

  • Google

    489questions

    Googleは、アメリカ合衆国に位置する、インターネット関連のサービスや製品を提供している企業です。検索エンジンからアプリケーションの提供まで、多岐にわたるサービスを提供しています。