0
私はここで何が間違っているのか完全に迷っています。私はかなりの時間があったけど運はなかった。何らかの理由でIEやFirefoxでページを読み込むたびに、divのスクロールバーが表示され、フォントサイズが大きくなるようです。私は根本的な原因が何であれ、両方の問題を引き起こしているという奇妙な感情を持っています。でも、オペラとSafariのウィンドウは罰金それをロードし、https://jsfiddle.net/041j4e9b/CSS、IE、Firefox、Edgeでのバグ
ちょうどクロームでそれをロードし、あなたはそれが正常に見えるが表示されます：あなたがページを見ることができるのはここ
です。しかし、それをIE、Edge、またはFirefoxにロードして、あなたが私が話していることをします。ユーザー名とパスワードの下にスクロールバーが表示されます。私を覚えてパスワードを忘れたフォントは、IE & Edgeではクロムよりもはるかに大きいので、1行に収まらない。 Firefoxはフォントサイズに問題がないようです。
私は関連コードを分離するために最善を尽くしました。以下のhtmlとcssはあなたに表示されたすべてをロードして表示するために必要ですが、これは必要以上にコードが多いことを理解していますが、結果を変更したり、元のウェブサイト。
<body>
<div class="wrapper">
<div class="login-page-wrapper">
<div class="login-wrapper">
<div class="login-dialog-wrapper">
<div class="single-element-wrapper">
<input value="" placeholder="Username" type="text">
</div>
<div class="single-element-wrapper">
<input value="" placeholder="Password" type="password">
</div>
<div class="single-element-wrapper adjusted-height">
<input type="submit" value="Log In" class="button-login">
<a class="button-link button-register">Register</a>
</div>
<div class="single-element-wrapper">
<div class="remember-me">
<input data-val="true" type="checkbox" value="true">
<label for="RememberMe">Remember me?</label>
</div>
<div class="forgot-password">
<a href="">Forgot Password?</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
body{
background: #000;
}
input[type=text] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
}
input[type=text]:focus {
outline: none;
}
input[type=text]:-webkit-autofill, input[type=text]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=text]::-webkit-input-placeholder, input[type=text]:-moz-placeholder, input[type=text]::-moz-placeholder, input[type=text]:-ms-input-placeholder {
color: green;
}
input[type=text]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=text]:-moz-placeholder {
color: #FF6A00;
}
input[type=text]::-moz-placeholder {
color: #FF6A00;
}
input[type=text]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=password] {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 100%;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
}
input[type=password]:focus {
outline: none;
}
input[type=password]:-webkit-autofill, input[type=password]:-autofill {
-webkit-box-shadow: 0 0 0px 1000px green inset;
-webkit-text-fill-color: red !important;
}
input[type=password]::-webkit-input-placeholder, input[type=password]:-moz-placeholder, input[type=password]::-moz-placeholder, input[type=password]:-ms-input-placeholder {
color: green;
}
input[type=password]::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=password]:-moz-placeholder {
color: #FF6A00;
}
input[type=password]::-moz-placeholder {
color: #FF6A00;
}
input[type=password]:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit], button {
background: transparent;
border: 0 none;
border-bottom: 2px solid #333;
height: 60px;
color: #FF6A00;
width: 150px;
font-size: 28px;
font-weight: 300;
font-stretch: condensed;
border: 2px solid #333;
border-radius: 8px;
color: #FFF;
font-size: 24px;
}
input[type=submit]:focus, button:focus {
outline: none;
}
input[type=submit]::-webkit-input-placeholder, button::-webkit-input-placeholder {
color: #FF6A00;
}
input[type=submit]:-moz-placeholder, button:-moz-placeholder {
color: #FF6A00;
}
input[type=submit]::-moz-placeholder, button::-moz-placeholder {
color: #FF6A00;
}
input[type=submit]:-ms-input-placeholder, button:-ms-input-placeholder {
color: #FF6A00;
}
input[type=submit]:hover, button:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
input[type=checkbox] {
width: 20px;
height: 20px;
vertical-align: middle;
}
label {
vertical-align: middle;
}
a:link, a:visited {
color: #ff6a00;
text-decoration: none;
}
a:hover, a:active {
text-decoration: underline;
}
a.button-link {
display: block;
height: 56px;
line-height: 60px;
text-align: center;
color: #FFF;
width: 150px;
background: transparent;
border: 2px solid #333;
border-radius: 8px;
font-size: 24px;
}
a.button-link:hover {
cursor: pointer;
background: #FF6A00;
text-decoration: underline;
}
html {
width: 100%;
height: 100%;
min-width: 320px;
font-family: "HelveticaNeueLightCondensed", "HelveticaNeue-Light-Condensed", "Helvetica Neue Light Condensed", "HelveticaNeueLight", "HelveticaNeue-Light", "Helvetica Neue Light", "HelveticaNeue", "Helvetica Neue", "TeXGyreHerosCnRegular", "Helvetica", "Tahoma", "Geneva", "Arial Narrow", "Arial", "sans-serif";
font-size: 21px;
font-weight: 300;
font-stretch: condensed;
color: #FFF;
}
html body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
border: 0;
}
html body .wrapper {
position: relative;
z-index: 100;
max-width: 1024px;
width: 100%;
margin: 0 auto;
background: url("../../Images/Shared/30-Percent-Black-Background.png");
height: 100%;
}
.login-page-wrapper {
width: 100%;
overflow: auto;
}
.login-page-wrapper .login-wrapper {
width: 50%;
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper {
margin-left: 25%;
margin-top: 10px;
min-width: 320px;
max-width: 350px;
overflow: auto;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-login {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .button-register {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .remember-me {
float: left;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .single-element-wrapper .forgot-password {
float: right;
}
.login-page-wrapper .login-wrapper .login-dialog-wrapper .adjusted-height {
height: 60px;
}
これは 'overflow：auto'によって発生します。代わりに「可視」にするとどうなりますか？ – Aziz
は 'box-sizing：border-box;で固定されました。 –
@ freestock.tkはどの要素ですか？これもフォントサイズの問題を修正しますか？ – Bojan