link_to で飛んだ先のcssが崩れる

Question

htmlで<%= link_to ........... %>を使ったところ飛んだリンク先のcssがくずれてしまいます。ですが、リロードするとcss は指定通りになります。何が原因でこうなっていてどうすれば直るか教えていただきたいです。

リンクに飛んだ直後

リロード後

h1{
  margin-top: 70px;
  text-align: center;
  color: #454545;
  font-size: 40px;
}

input{
  background-color: white;
  transition: all .6s ease;
  border:2px solid gray;

  border-radius:0px;
  width:400px;
  height: 35px;
  font-size: 20px;
  color: #3c3c3c;
  outline: none
}

.name{

}
.a{
  text-align: center;
}
.b{
  text-align: center;
  margin-right: 360px;
  margin-top: 30px;
}
.bb{
  text-align: center;
  margin-right: 308px;
  margin-top: 30px;
}
.bbb{
  text-align: center;
  margin-right: 332px;
  margin-top: 30px;
}
.next{
  text-align: center;
  margin-top: 10px;
}

.next button{
  font-size: 25px;
  color: white;
  width: 100px;
  height: 40px;
  border-radius: 0px;
  border-style: none;
  background-color: black;
  outline: none;
}
.next button:hover{
  background-color: black;
コード

<h1>入力してください</h1>
<%= form_tag("/users/create") do %>
  <p class="b">名前</p>
  <div class="a">
    <input name="name" class="name">
  </div>
  <p class="bb">メールアドレス</p>
  <div class="a">
    <input type="mail" name="mail" class="mail">
  </div>
  <p class="bbb">パスワード</p>
  <div class="a">
    <input type="password" name="password" class="password">
  </div>
  <div class="next">
    <button type="button" name="next">登録</button>
  </div>
<% end %>

コード

Comments

[m.ts10806]

URL直アクセスではどうでしょうか

[y-kou]

問題なく指示通りの配置になりました

Answer 1

Turbokinks関連でcssが崩れることがあるみたいです。いったん、turbolinksを無効にして試してみてはどうでしょうか。あくまで、予想ですが…
Turbolinksでcss崩れる

<%= link_to "マイページ", current_user, data: {"turbolinks" => false} %>

Comments

[y-kou]

ありがとうございます。無事解決しました。