3
我目前使用HTML和CSS來修改我的圖書館的libguides2主頁。出於某種原因，頁面右側會出現一個虛幻的白色列。它在Chrome，Firefox和Safari中。它不會在IE上顯示。它在頁面加載時不會顯示，但是如果您在桌面上向右滾動或在移動設備上縮小，則會出現。網頁右側的隨機白色列
以下是截圖：
這裏的直播網站：
http://nybg.beta.libguides.com/
這是我的小提琴：
https://jsfiddle.net/pjp5rxws/
白色空間不在小提琴中，但Springshare支持（製作和託管libguides的人）表示它不是頁面代碼中的某些東西，我無法理解。
任何想法？這個問題不是世界末日，但我希望瞭解並修復它，如果可能的話！
而且我知道我的CSS應該放在一個單獨的文檔中，儘管它還沒有在一個單獨的文檔中 - 該網站的設置方式使得我暫時管理我的beta版本。我打算移動CSS！
我不知道我的代碼是什麼有益的在這裏，所以這裏是我的CSS：
* {
margin: 0;
padding: 0;
outline: none;
-webkit-box-sizing: border-box;
- moz-box-sizing: border-box;
box-sizing: border-box;
}
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section {
display: block;
}
html {
font-size: 100%;
height: auto !important;
height: 100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
.clear {
display: block;
}
.clear::after {
clear: both;
content: ".";
display: block;
height: 1px;
visibility: hidden;
}
html,
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}
mobilenav {
display: none;
width: 100%;
z-index: 1000;
background-color: #000000;
text-align: center;
}
mobilenav div {
width: 100%;
}
mobilenav a {
color: #ffffff;
letter-spacing: 0.0625em;
font-weight: bold;
text-transform: uppercase;
display: block;
text-decoration: none;
text-align: center;
padding: 1rem;
}
mobilenav a:hover {
color: #DADADA;
text-decoration: none;
}
mobilenav > nav > ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
list-style: none;
margin: 0;
padding: 0;
}
mobilenav > nav > ul:hover {
background-color: #000000;
}
mobilenav > nav > ul > li {
flex: 0 1 auto;
margin: 0;
padding: 0;
position: relative;
width: 100%;
transition: all linear 0.1s;
}
mobilenav > nav > ul > li a + div {
display: none;
position: absolute;
}
mobilenav > nav > ul > li:hover a + div {
display: block;
background-color: #000000;
}
mobilenav > nav > ul > li a + div > ul {
list-style-type: none;
}
mobilenav > nav > ul > li a + div > ul > li {
margin: 0;
padding: 0;
}
mobilenav > nav > ul > li a + div > ul > li > a {
display: block;
padding: .25rem 1.5rem;
text-decoration: none;
}
mobilenav > nav > ul > li > a {
align-items: flex-start;
display: flex;
padding: 1rem 1.5rem;
text-decoration: none;
}
.container {
display: flex;
padding: 1% 0;
}
.headerimage {
display: flex;
align-content: center;
align-items: center;
padding: 0 2%;
}
.headerimage img {
width: 100%;
padding-right: 50px;
}
.logoname {
text-transform: uppercase;
flex-flow: row;
}
.fullpage {
background-color: #ffffff;
}
.menu {
background-color: #000000;
}
.site-navigation ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.site-navigation a {
color: #ffffff;
letter-spacing: 0.0625em;
font-weight: bold;
text-transform: uppercase;
display: block;
text-decoration: none;
text-align: center;
padding: 1rem;
}
.site-navigation a:hover {
color: #DADADA;
}
.fullpagesnh {
background: url(https://s3.amazonaws.com/libapps/accounts/69823/images/IVO_2541_LARGE.jpg) no-repeat center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.fullpagesnh h2 {
color: #ffffff;
}
.fullpagesnh a {
text-decoration: none;
color: #ffffff;
}
.fullpagesnh a:hover {
color: #ffffff;
text-decoration: underline;
}
.snhcontainer {
display: flex;
justify-content: center;
}
.searchandhours {
flex-direction: row;
display: flex;
align-items: center;
}
.librarysearch {
margin: 100px 0 100px 0;
padding: 20px;
}
.fullpagesnh form {
padding: 20px;
background-color: rgba(0, 0, 0, .75);
}
.hours ul {
padding: 20px;
margin-left: 50px;
background-color: rgba(0, 0, 0, .75);
color: #ffffff;
list-style: none;
}
.contentcontainer {
background-color: #ffffff;
padding-top: 100px;
}
.row {
display: inline-block;
}
.sideblack {
margin: 5% 2.5%;
margin-bottom: 50px;
padding: 20px;
background-color: #000000;
color: #ffffff;
text-transform: uppercase;
text-align: center;
font-size: larger;
font-weight: bold;
}
.sideblack:hover {
color: #000000;
background-color: #ffffff;
}
.Special_box {
margin: 5% 2.5%;
border: 1px solid #CECECE;
word-wrap: break-word;
}
.Special_box h2 {
color: #000000;
}
.Special_box p {
color: #999AA9;
font-weight: bold;
}
.Special_box:hover {
background-color: #CECECE;
}
.Special_box a {
color: #ffffff;
}
.Special_box .bottom {
padding: 10px;
}
.Special_box img {
width: 100%;
margin: 0;
padding: 0;
}
.libguidescontent .row {
padding: 0;
margin: 0;
width: 100%;
}
.nav.nav-pills button.btn {
background-color: #ffffff !important;
color: #000000 !important;
}
.libguidescontent .alert {
background-color: #F5F5F5;
border: none;
}
.libguidescontent h1 {
padding-top: 50px;
padding-bottom: 25px;
}
.libguidescontent a {
color: #000000;
}
.libguidescontent strong {
color: #26B56E;
}
.whitespace {
height: 200px;
}
.footfoot {
background-color: #000000;
}
.foot-navigation ul {
display: flex;
list-style: none;
margin: 0;
padding-bottom: 40px;
display: flex;
justify-content: center;
flex-direction: row;
flex-wrap: wrap;
}
.foot-navigation ul li {
padding-right: 50px;
color: #ffffff;
font-weight: bold;
}
.foot-navigation ul li h3 {
font-size: 16px;
color: #ffffff;
text-transform: uppercase;
font-weight: bold;
margin-bottom: 0;
}
@media only screen and (max-width: 1024px) {
.Special_box img {
display: none;
}
.sideblack {
display: none;
}
}
@media all and (max-width: 600px) {
mobilenav {
display: block;
}
.contentcontainer {
padding: 0;
}
.headerimage img {
width: 200px;
padding-right: 30px;
}
.headerimage h1 {
font-size: 14px;
word-wrap: normal;
font-weight: 600;
}
.site-navigation ul {
flex-flow: column wrap;
padding: 0;
}
.foot-navigation ul {
flex-flow: column wrap;
padding-left: 20px;
}
.searchandhours {
flex-flow: column wrap;
padding-left: 20px;
}
.librarysearch {
margin: 0;
}
.libraryhours {
display: none;
}
body {
margin: 0;
}
.menu {
display: none;
}
}
我知道，我的CSS應該是在一個單獨的文件，雖然目前尚不能在一個單獨的文件 - 該網站是建立在這樣一種方式，這是怎麼了我暫時管理我的測試版本。我打算移動CSS！ – Edgar
如果我滾動到右側 – mplungjan
我只能在Chrome中的實時網站上重現您的問題在Mac上的最新Chrome中沒有看到任何錯誤。你在用什麼？ –