ローカル環境とPC上で、HTMLが同じように反映されません

###前提・実現したいこと
検索ボックス高さを大きくしようと高さを大きくしたのですが、
ローカル環境とPC上で、HTMLが同じように反映されません。

これはいったいなぜでしょうか？

●ローカル環境

●PC上(mac)

###ソースコード

index.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4
5<meta charset="UTF-8">
6<title>My Web Site</title>
7<link rel="stylesheet" href="style.css" type="text/css">
8<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js">
9
10 </script>
11
12</head>
13<body>
14
15
16<header>
17<div class="header-right">
18  <li><a href="index2.html" class="login" target="_blank"><p class="login1">新規登録</p></a></li>
19
20</div>
21
22
23</header>
24
25
26<div class="main">
27
28    <h1>行ってみたい<span>国</span>一覧</h1>
29
30
31
32</div>
33
34
35<div class="wrapper">
36
37  <form class="research" action="search.php" method="post">
38      <input  class="research" type="search" size="40" name="nation" placeholder="キーワードを入力">
39      <input class="research" type="submit" name="research" value="検索"><br>
40
41  </form>
42
43
44  <table border="1">
45
46    <tr>
47      <th class="head">順位</th>
48      <th class="head">国名</th>
49      <th class="head">食べたい食べ物</th>
50      <th class="head">理由</th>
51      <th class="head"></th>
52    </tr>
53
54
55  <tr>
56    <td>1位</td>
57    <td>スペイン</td>
58    <td>パエリア</td>
59    <td>サッカーを見たいから</td>
60    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
61  </tr>
62
63  <tr>
64    <td>2位</td>
65    <td>アメリカ</td>
66    <td>グリルロブスター</td>
67    <td>ダンスの文化を知りたいから</td>
68    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
69  </tr>
70
71  <tr>
72    <td>3位</td>
73    <td>インド</td>
74    <td>カレーライス</td>
75    <td>発展途上の国を間近で見てみたいから</td>
76   <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
77  </tr>
78
79  <tr>
80    <td>4位</td>
81    <td>タイ</td>
82    <td>ガパオ</td>
83    <td>バンコクの発展具合を見てみたいから</td>
84    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
85  </tr>
86
87  <tr>
88    <td>5位</td>
89    <td>フィリピン</td>
90    <td>アドボ </td>
91    <td>友達が楽しそうに働いているから</td>
92    <td><a href="update1.php">編集</a> <a href="delete1.php">削除</a></td>
93  </tr>
94
95
96
97  </table>
98
99</div>
100
101
102
103
104
105
106<footer>
107
108
109<div class="footer-left">
110<img src="https://www.fastpic.jp/images.php?file=3519571152.jpg" alt="ロゴ画像">
111<p>&copy travel enjoy.</p>
112</div>
113
114<div class="footer-list">
115    <ul>
116      <li><a  href="https://www.airbnb.jp/">利用規約</a></li>
117      <li><a  href="https://www.uber.com/ja-JP/">プライバシー</a></li>
118      <li><a  href="https://tabelog.com/tokyo/A1307/A130701/13191934/">アクセシビリティ</a></li>
119    </ul>
120</div>
121
122
123
124</footer>
125
126 <script src="script.js">
127
128  </script>
129
130
131</body>
132</html>
133

●style.css

css
1@charset "UTF-8";
2/*全体のCSS*/
3
4body {
5    font-family: "ＭＳ ゴシック",sans-serif;
6}
7
8li {
9    list-style: none;
10}
11
12
13
14html, body, div, span, applet, object, iframe,
15h1, h2, h3, h4, h5, h6, p, blockquote, pre,
16a, abbr, acronym, address, big, cite, code,
17del, dfn, em, font, img, ins, kbd, q, s, samp,
18small, strike, strong, sub, sup, tt, var,
19b, u, i, center,
20dl, dt, dd, ol, ul, li,
21fieldset, form, label, legend,
22table, caption, tbody, tfoot, thead, tr, th, td {
23  margin: 0;
24  padding: 0;
25  border: 0;
26  outline: 0;
27  font-size: 100%;
28  vertical-align: baseline;
29  background: transparent;
30}
31body {
32  line-height: 1;
33}
34ol, ul {
35  list-style: none;
36}
37blockquote, q {
38  quotes: none;
39}
40blockquote:before, blockquote:after,
41q:before, q:after {
42  content: '';
43  content: none;
44}
45
46/* remember to define focus styles! */
47:focus {
48  outline: 0;
49}
50
51/* remember to highlight inserts somehow! */
52ins {
53  text-decoration: none;
54}
55del {
56  text-decoration: line-through;
57}
58
59/* tables still need 'cellspacing=0' in the markup */
60table {
61  border-collapse: collapse;
62  border-spacing: 0;
63}
64
65/* ここから下はそれぞれのCSS */
66.header-left {
67float: left;
68}
69
70.header-right {
71    float: right;
72    margin-bottom: 30px;
73    background-color: white;
74    margin-right: 20px;
75    opacity: 0.8;
76}
77
78.header-right:hover {
79      background-color:skyblue;
80}
81
82.header-right a {
83    width: 80px;
84    margin-top: 14px;
85    display: block;
86    padding: 22px 25px;
87    color: blue;
88    margin: auto 0;
89    letter-spacing: 2.5px;
90}
91
92
93.logo {
94    width: 130px;
95    margin-left: 15px;
96    height: 60px;
97}
98
99
100/* mainのCSS */
101
102.main {
103    padding: 200px 0 150px 0;
104    background-image: url(https://www.fastpic.jp/images.php?file=1146462294.jpg);
105    background-size: cover;
106    width: 100%;
107}
108
109form {
110    text-align: center;
111}
112
113.main h1 {
114    text-align: center;
115    font-size: 40px;
116    font-weight: bold;
117    margin-bottom: 100px;
118}
119
120span {
121    color: #FA3932;
122}
123
124/* ボタンのCSS */
125
126.research {
127  margin-top: 30px;
128}
129
130
131input[type="submit"] {
132  width: 5%;
133  padding: 7px;
134  border-radius: 4px;
135  color: black;
136  font-size: 14px;
137  background-color: white;
138}
139
140input[type="search"] {
141  padding: 1em .4em;
142}
143
144
145
146/* tableのCSS */
147
148
149
150table , td, th {
151    border: 1px solid #595959;
152    border-collapse: collapse;
153  margin: auto;
154  margin-top: 100px;
155  margin-bottom: 100px;
156  font-size: 30px;
157}
158
159.warapper {
160  height: 300px;
161}
162
163table a {
164    text-decoration: none;
165  color: #0000ff;
166}
167
168
169
170table a:hover {
171    color: #6699ff;
172    text-decoration: underline;
173}
174
175
176table a:active {
177    color: #993366;
178}
179
180.head {
181  background-color: #CCFFFF;
182}
183
184/* フッターのCSS */
185
186footer {
187    border-top: solid 1px black;
188    height: 110px;
189    width: 100%;
190}
191
192footer img {
193    width: 130px;
194    margin-left: 15px;
195    height: 60px;
196}
197
198.footer-left {
199
200    height: 110px;
201    float: left;
202}
203
204.footer-list {
205    color:#b3aeb5;
206    bottom: 20px;
207    vertical-align: middle;
208    margin: auto 0;
209    float: right;
210    font-weight: normal;
211
212    height: 110px;
213}
214
215.footer-list li {
216    float: left;
217    letter-spacing: 7px;
218    padding: 47px 15px;
219}
220
221footer p {
222    margin-top: 10px;
223    padding-left: 10px;
224}
225

どうかご教授いただけたら嬉しいです。
宜しくお願い致します。

kjml

2017/09/08 11:30

ローカル環境とは？ソースが同じという確証があるなら、表示に違いがあれば環境に違いがあると思いますので、ローカル環境が何であるか、PCでの確認のブラウザやバージョンなども明記されると違いがどこかにつながりやすいと思います。

x_x

2017/09/08 12:24

ローカルはPCではないのでしょうか？

kjml

2017/09/08 13:13

おや？何か勘違いしてますでしょうか？尚更ローカル環境とPC上の違いがわからなくなるのですが・・・

x_x

2017/09/11 07:33

ええと、わたしも質問者への質問です。

行動規範の内容に同意します

回答2件

そもそも表示に差異が発生する原因を確認してみてはいかがでしょうか？

検索ボックスにあたっている Style が同一であるか確認してみてください。
Style の当たり方に差異があるはずですが、それがどこか分かれば、原因が特定に近づきます。

投稿2017/09/08 10:53

編集2017/09/08 10:54

退会済みユーザー

総合スコア0

dog57

2017/09/08 11:21

原案は探しましたが見つかりませんでした。スタイルは同じにしてあることも確認しました。もう一度、確認してみようとおもきます。

退会済みユーザー

2017/09/08 11:25

原案が何を指しているのか分かりませんが、「あたっている Style」が同じであるか確認してください。 chrome であれば、F12 で開ける開発ツールで、要素を選択することで確認することができます。「あたっている Style」が同じであれば、表示は同じになるので、「あたっている Style」に差異は発生しているはずです。

行動規範の内容に同意します