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

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

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

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

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

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

php
1<div class="c-searchBlock1">
2			<div class="c-searchBlock1__title">
3				<i class="c-icon c-icon--i65-1"></i>
4				<p>フリーワードで検索する ：</p>
5			</div>
6			<div class="c-searchBlock1__input">
7				<div class="c-search">
8					<input type="text" class="search" value="" placeholder="エリアから検索">
9					<button><i class="c-icon c-icon--i72-2"></i></button>
10				</div>
11			</div>

CSS
1/* 検索入力
2------------------------------------------------------------*/
3.c-searchBlock1 {
4  margin-top: 30px;
5  display: flex;
6  align-items: center;
7  justify-content: space-between;
8}
9
10@media screen and (max-width: 767px) {
11  .c-searchBlock1 {
12    background: #EFF1F0;
13    margin-top: 0;
14    margin-bottom: 0;
15    border-bottom: 1px solid #CFCFCF;
16    padding: 20px 11px;
17    display: block;
18  }
19}
20
21.c-searchBlock1__title {
22  display: flex;
23  align-items: center;
24  overflow: hidden;
25}
26
27.c-searchBlock1__title i {
28  width: 18px;
29  height: 18px;
30  margin-right: 5px;
31}
32
33.c-searchBlock1__title p {
34  font-size: 1.4rem;
35}
36
37@media screen and (max-width: 767px) {
38  .c-searchBlock1__title {
39    display: none;
40  }
41}
42
43.c-searchBlock1 .c-search {
44  width: 560px;
45}
46
47@media screen and (max-width: 767px) {
48  .c-searchBlock1 .c-search {
49    width: auto;
50  }
51}
52
53.c-searchBlock1 .c-search input {
54  width: 520px;
55  height: 35px;
56  font-size: 1.4rem;
57}
58
59@media screen and (max-width: 767px) {
60  .c-searchBlock1 .c-search input {
61    width: calc(100% - 40px);
62    margin-left: 0;
63  }
64}
65
66.c-searchBlock1 .c-search button {
67  width: 40px;
68  height: 35px;
69}
70
71.c-searchBlock1 .c-search button svg {
72  width: 20px;
73}
74
75@media screen and (max-width: 767px) {
76  .c-searchBlock1 .c-search button {
77    width: 13%;
78  }
79}

sk_3122

2018/05/21 01:31 編集

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

UKYO9311

2018/05/21 02:18

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

sousuke

2018/05/21 02:21

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

sk_3122

2018/05/21 04:10 編集

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