Chromeのhtml/CSSが期待どおりに動作しない

Question

Firefoxでは、自分のコードは動作しますが、Chromeでは動作しません。

• これは私のクローム結果である：

• これは私のFirefoxの結果である：

.welkom { 
 
    color: #ff0007; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 30px; 
 
} 
 
.informatie { 
 
    float: right; 
 
    margin-top: -250px; 
 
    margin-right: 70px; 
 
}

<div class="informatie"> 
 
    <p class="welkom">naam: Jasper scheper</p> 
 
    <p class="welkom">leeftijd:15</p> 
 
    <p class="welkom">woonplaats: Nieuw-Buinen</p> 
 
    <p class="welkom">email: placeholder</p> 
 
</div>

Answer 1

私はそれがwouldnない理由を見ることはできません情報からの仕事ブラウザのキャッシュをクリアしてもう一度チェックすることをお勧めします。それ以外の場合は、コードの深いところに何かがあるかもしれません。

Answer 2

クロムは、マイナスのマージン値をサポートしていません。そのスタイルを実現するには、position absoluteを.informatieクラスに使用し、上下の値を調整します。

例：

.informatie { 
    position:absolute; 
    top:300; /* your customised value */ 
    right:0; /* your customised value */ 
} 

Answer 3

問題はuが負のマージン値を使用するが、uは絶対的および相対的親要素の位置を与えることがある

.welkom { 
 
    color: #ff0007; 
 
    font-family: 'Source Sans Pro', sans-serif; 
 
    font-size: 30px; 
 
} 
 
.informatie { 
 
    float: right; 
 
    margin-top: 0px; 
 
    margin-right: 70px; 
 
}

<div class="informatie"> 
 
    <p class="welkom">naam: Jasper scheper</p> 
 
    <p class="welkom">leeftijd:15</p> 
 
    <p class="welkom">woonplaats: Nieuw-Buinen</p> 
 
    <p class="welkom">email: placeholder</p> 
 
</div>