0
我完全喪失了這裏的錯誤。我已經呆了很長一段時間，但沒有運氣。由於某種原因，無論何時我在IE或Firefox中加載我的頁面，我在某些div上都會出現可滾動條，字體大小似乎更大。我有一種奇怪的感覺，無論根源是什麼，它都會導致這兩個問題。IE瀏覽器，Firefox和邊緣的CSS錯誤
在這裏你可以看到頁面：https://jsfiddle.net/041j4e9b/
只需加載它在Chrome中，你會看到它看起來不錯，甚至Opera和Safari窗口加載的罰款。但是，然後在IE，Edge或Firefox中加載它，你就會知道我在說什麼。在用戶名和密碼下方，您將看到可滾動條。記住我和忘記密碼字體在IE瀏覽器& Edge中也比在Chrome中大得多，它們無法放在單行上。 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