0
當我進入Chrome，你知道開發者模式的事情，你得到設備寬度，以及我有一個問題，在css中的overflow: hidden元素。寬度爲1440px，其帶有HiDPI的筆記本電腦。我的.login類有溢出，我不想要，有沒有解決這個問題？這裏是我的代碼：溢出：隱藏不工作，當它在一定的寬度1440px
HTML：
<!DOCTYPE html><script src="snazzy/scripts/home.reg/maIn.js"></script><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"><link rel="stylesheet" type="text/css" href="./snazzy/styles/home.reg/beta.css" /><link rel="stylesheet" type="text/css" href="./snazzy/styles/home.reg/media.css" /><title>Home • </title><script type="text/javascript">function myFunction(){location.reload();}</script><style type="text/css">.scrollers{z-index:1;height:5vh;overflow:hidden;position:relative;margin-top:5pt;margin-left:250pt;padding-800vh;width:;font-size:110%;margin-right:;}.scrollers p{z-index:-1;height:100%;width:100%;position:absolute;margin:0;text-align:center;white-space:nowrap;color:#000;padding-bottom:2pt;<!-- STARTING POS -->-moz-transform: translateX(100%);-webkit-transform: translateX(100%);transform: translateX(100%);<!-- ANIMATION -->-moz-animation: scrollers 15s linear infinite;-webkit-animation: scrollers 15s linear infinite;animation: scrollers 15s linear infinite;}@-moz-keyframes scrollers{0%{-moz-transform: translateX(100%);}100%{-moz-transform: translateX(-100%);}}@-webkit-keyframes scrollers {0%{-webkit-transform: translateX(100%);} 100%{-webkit-transform: translateX(-100%); }}@keyframes scrollers {0%{-moz-transform: translateX(100%);-webkit-transform: translateX(100%);transform: translateX(100%);} 100% {-moz-transform: translateX(-100%);-webkit-transform: translateX(-100%); transform: translateX(-100%);}}</style></head><body id="body"><!-- BETA VERSION --><div class="wrapper"><div class="main"><div class="headerTop" id="top"> <!-- <div class="sidebar"></div> <div class="logoTop"><a href="" title=""><img src="" title="Return To Home" alt="Failed To Load Image):" /></a></div>--><div class="menuTop"><ul class="links"><li><a href="register.php" title="Coming Soon!" class="sUp" onclick="return false">Register</a></li><li><a href="" title="Site Home">Home</a></li><li><a href="" title="Contact Us">Contact</a></li><li><a href="" title=""></a></li></ul></div> <!-- <div class="scrollingText"><script type="text/javascript">document.write("<form name=\"tickform\">");document.write("<input type=\"text\" name=\"tickfield\" disabled=\"disabled\" class=\"scroll\" size=\"150\">");document.write("</form>");textticker();</script></div>-->
<div class="scrollers"><p>This Is A Beta Version! This Isn't 100% Bug Free So Please Feel Free To Contact Us Via The Contact Options Provided</p></div><!-- <div class="floatRight"><div class="searchWrapper"><form method="GET" action="index.php"><input type="search" placeholder="Search" name="q" /> <button type="submit" class="submit"><li>Search</li></button></form></div></div> --></div><div class="login" align="center" style="overflow:hidden;"><h3>Already A Member? Login Below:</h3><form method="GET" action="index.php"><input type="text" name="fname" placeholder="Display Name" /><br /><br /><input type="password" name="pass" placeholder="Password" /><br /><br /><button name="submit"><li>Login</li></button></form><!--
<div class="register">
<form method="POST" action="inex.php">
<input type="text" name="first_name" placeholder="Forename" class="inputs" /><br /><br />
<input type="text" name="last_name" placeholder="Surename" class="inputs" /><br /><br />
<input type="text" name="user_name" placeholder="Username" title="This is what people will know you by." class="inputs" /><br /><br />
<input type="password" name="pass_word" placeholder="Password (Choose a secure password!)" class="inputs"/><br /><br />
<input type="password" name="pass_confirm" placeholder="Confirm Password" class="inputs" /><br /><br />
<input type="email" name="e_mail" placeholder="Email" class="inputs" /><br /><br />
<input type="email" name="e_mail_confirm" placeholder="Confirm Email" class="inputs"/><br /><br />
<button name="submit" style="" class="buttonClick"><li>Register</li></button>
</form>
</div> -->
</div></div>
<div class="articles">
<div class="article-white">
<div class="image"><a href="" title=""><img src="./img/logo_big.png" title="iCodeUrSite" alt="iCodeUrSite.com" draggable="false" />
</a><p style="margin-top:-1%"><span style="font-weight:bold;font-size:20pt">Show Your Coding Skills Here!</span> Publish projects you have worked on or even write a blog with code or update your profile with code or edit your profile responsiveness on each device yourself! Click, Drag and Drop is a feature for people with no code experience</p>
</div>
<h1>Introduction</h1>
We are glad you are here! Welcome to a new Social Network designed for your comfort and own enjoyment. There is a changelog for Beta Version which you can view <a href="" title="" onclick="return false">here</a>. Code a blog and post it by using HTML, CSS any many other programming languages! Even customize your own profile by using HTML and CSS if you know how to code, which will be added in later versions. If you aren't experienced don't worry we'll add a feature to click and drap and drop elements to where you want them!
</div>
<div class="article-clear">
<h1>More In Depth . . . </h1>
This is a new Social Network on the web! What makes us unique is that not only we are <u>new</u> but we are also packed full of features that no other site has. Some features will not be included in the Beta. We are trying to get it as responsive as possible and we have kind of done that but not 100%. We're trying to get it compatible with every device and browser as well!
</div>
<div class="article-white">
<h1>How To Log In</h1>
You must be wondering how you suppose to log in if you can't register yet? Well, you must send a reigster application to me (Email Will Be In The Footer) and i will take in all your requested details and add you to the database. After that i send the details to your dedicated email you emailed me with, and BAM, you can now log in. Unfortunately you cannot register at the moment but it is still under construction! If you'd like to change your details at any time, you can also email a resetuest to do so.
</div>
</div>
<div class="form">
<h2>Submit A Request</h2>
<form method="POST" action="index.php">
<textarea rows="5" cols="50" placeholder="Enter Your Comment Here" class="tarea" spellcheck="false"></textarea><br /><br /><button name="submit" class="site-BTN"><li>Submit</li></button>
</form>
</div>
<div class="footer">
<div class=""><p align="center">Copyright © <?php echo Date('Y'); ?> | All Rights Reserved</p></div>
<div class="footer-Menu">
</div>
<div class="image" id="footer-Logo" draggable="false"><a href="" title=""><img src="./img/logo_big.png" title="iCodeUrSite" alt="iCodeUrSite.com" draggable="false" /></a>
</div>
</div></div></div>
<!-- BETA VERSION END --></body></html>
CSS（媒體查詢）
@media screen and (max-width:360px) {
.headerTop,
.menuTop {
position: static;
top: 0;
z-index: 1;
clear: both;
float: left;
}
.headerTop {
width: 0;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
.menuTop {
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
background: rgba(63, 127, 191, 0.77);
width: 100%;
z-index: ;
max-width: 360px;
min-width: 361px
}
.scrollers {
visibility: hidden;
}
.image img {
width: 350px;
height: 150px
}
.article-white,
.article-clear {
width: 360px;
max-width: 360px;
min-width: 354px;
}
.tarea {
width: 330px;
max-width: 335px;
min-width: 330px;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
}
@media screen and (max-width:600px) {}
@media screen and (max-width:320px) {}
@media screen and (max-width:510px) {}
@media screen and (max-width:384px) {
.headerTop,
.menuTop {
position: static;
top: 0;
z-index: 1;
clear: both;
float: left;
}
.headerTop {
width: 0;
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
}
.menuTop {
transition: 1s all ease 0s;
-webkit-transition: 1s all ease 0s;
-moz-transition: 1s all ease 0s;
-o-transition: 1s all ease 0s;
background: rgba(63, 127, 191, 0.77);
width: 100%;
z-index: ;
max-width: 384px;
min-width: 384px
}
.scrollers {
visibility: hidden;
}
.image img {
width: 350px;
height: 150px
}
.article-white,
.article-clear {
width: 384px;
max-width: 384px;
min-width: 354px;
}
.tarea {
width: 330px;
max-width: 335px;
min-width: 330px;
}
body {
overflow-x: hidden;
}
}
@media screen and (max-width:1440px) {
.login {
overflow: hidden;
position: relative;
max-width: 1430px;
height: 200px
}
}
純CSS
html, body{cursor:url(bg.png);height: 100%;margin:0;padding:0;background:#fff;height:100%;/*url(bg2.png)center center fixed no-repeat; */-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;}body:before{}.headerTop{height:27pt;width:100%;background:rgba(63, 127, 191, 0.77);box-shadow: 0 0 4vh rgba(0,0,0,0.64);top:0;position: fixed;z-index: 1}.logoTop{background:#888;height: 10vh;width:10vh;box-shadow: 0 0 4vh rgba(0,0,0,0.64);border:0;outline:0;}.logoTop img{height: 10vh;width:10vh;font-size: 2vh;border:0;outline:0;}.menuTop{transition: 1s all ease 0s;-webkit-transition: 1s all ease 0s;-moz-transition: 1s all ease 0s;-o-transition: 1s all ease 0s;background:;clear:both;float:left;margin-left:;box-shadow:;top:0;position:fixed;height:27pt;width:250pt;box-shadow:0 0 4vh rgba(0,0,0,0.64);-webkit-box-shadow:0 0 4vh rgba(0,0,0,0.64)}.links{margin-top:5pt;margin-left:-2%;margin-right:-98%;white-space:nowrap;clear:both;float:left;height:27pt;width:250pt;}.links li{list-style-type:none;display:inline;font-size:120%;padding:4pt;}.links li a{white-space:nowrap;color:#222;text-decoration:none;font-size:;font-family:Arial;}.floatRight{height:45pt;width:250pt;clear:both;float:right;box-shadow:;top:0;right:0;position:fixed;}.sUp:active{background:none}.sUp{background:none;padding:3px;border:1px solid #222;cursor:not-allowed}.sUp:hover{background:#222;color:#fff}.searchWrapper{margin-right:10pt;height:45pt;width:250pt;clear:both;float:right;top:0;right:0;position:fixed;margin-top:-4pt}.searchWrapper form{margin-top:1vh;margin-left:1vh;white-space:nowrap}input[type=search]{padding:3px;border:1px solid #555;width:200pt}.submit{background:none;border:1px solid #555;padding:3px;color:#555;cursor:pointer}.submit li{list-style-type:none;}.submit:hover{color:#fff;background:#555;}.sidebar{height:100%;width:100pt;background:rgba(63, 127, 191, 0.77);position:fixed;left:0;top:0;z-index:-1;resize:right;}.login{margin-top:40pt;overflow:hidden}.login h3{text-decoration:underline;color:rgba(63, 127, 191, 0.77)}.login form{}.login form input[type=text]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.login form input[type=password]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.login form button{border:none;outline:none;padding:3pt;background:none;border:1px solid #555;border-radius:1pt;cursor:pointer}.login form button li{list-style-type:none}.register{margin-top:15pt}.register form input[type=email]{border:none;outline:none;padding:3pt;border:1pt solid #eee;border-radius:1pt}.articles{box-shadow:0 0 4pt rgba(0,0,0,0.64) inset;background:rgba(10, 91, 255, 0.94);height:auto;width:100%;margin-top:20pt;padding:20pt 0 40pt 0;text-align: center}.article-white{background:;padding:20pt 0 40pt 0;min-width:100%}.article-clear{background:#fff;padding:20pt 0 40pt 0;box-shadow: ;min-width:100%}.wrapper{min-height:100%;}.main{overflow:auto;padding-bottom: ;}.footer{position: relative;margin-top:50pt;height:auto;clear:both;background:rgba(63, 127, 191, 0.77);padding:10pt 0 10pt 0;box-shadow: 0 0 4vh rgba(0,0,0,0.64);}.tarea{max-width:500px;border:1px solid rgba(10, 91, 255, 0.94);box-shadow: 0 0 4px rgba(39, 27, 212, 0.77)}.form{margin-top:20pt;text-align:center}.footer div p{}.footer-Menu{}.site-BTN{border:none;outline:none;background:none;border:1px solid rgba(10, 91, 255, 0.94);box-shadow:;padding:4pt;cursor: pointer}.site-BTN li{list-style-type:none}.image{}.image img{height:150px;padding:0;outline:0;border:0;transition: 1.5s all ease 0s;-webkit-transition: 1.5s all ease 0s;-moz-transition: 1.5s all ease 0s;-o-transition: 1.5s all ease 0s;}#footer-Logo{text-align: center}
.dev{margin-top:40pt;text-align:center}iframe{display:inline}
道歉，如果我的代碼是不容易閱讀。 如果有人知道爲什麼會發生這種情況，如果你能幫助我，這將是非常棒的。謝謝