0

在 Mozilla Firefox 上,一切看起来都很好,我没有任何问题,但是当我在 Google Chrome 上打开它时,我页面左侧的文本没有显示并且全部结束。

我所说的文字是链接上方页面左侧的“Learn To Design”和“Resources”。我以前从未遇到过这种情况。

designatease.com

HTML

<div id="wrapper">
<div id="midwrap"><a class="headerone">Welcome to Design At Ease</a>
<p class="paragraph1">So, you want to code? Touch up on your skills? Or maybe you want to make a design on Photoshop and you don't know how? Whatever it is, you came to the right place. I designed this site for the simple use of web designers. I have had a great deal of trouble in the past, while learning to design and I always searched for that one page that gave me all the information I needed. So, I set out to make it! That site is called Design At Ease.</p>
<ul id="tagsone"></ul>
</div>
<a class="Resources">Resources</a>
<ul id="sidelinksleft">
<li><a href="quickstart.html">Quick Start</a></li>
<li><a href="tagsmain.html">Tag Helper</a></li>
<li><a href="news.html">News</a></li>
<li><a href="learn.html">Learn</a></li>
<li><a href="sites.html">Useful Sites</a></li>
</ul>
<a class="learntodesign">Learn To Design</a>
<ul id="sidelinkslefttwo">
<li><a href="html.html">HTML</a></li>
<li><a href="css.html">CSS</a></li>
<li><a href="javascript.html">Javascript</a></li>
<li><a href="othercoding.html">Other Coding</a></li>
<li><a href="photoshop.html">Photoshop</a></li>
<li><a href="morelearning.html">More...</a></li>
</ul>

CSS

#wrapper{
position:relative;
top:-62px;
margin-right:4%;
margin-left:4%;
width:92%;
height:100%;
background:#fafafa;
border-left: 1px #c9c9c9 solid;
border-right: 1px #c9c9c9 solid;
overflow:hidden;
}

#sidelinksleft {
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:25px;
    position:relative;
    /*removed clear from here*/
    float:left;
    margin-left:-25px;
    top:15px;
}

#sidelinksleft li{
position:relative;
padding-top:3px;
list-style-type: none;
}

#sidelinksleft li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinksleft li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

.Resources{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-156px;
top:10px;
}

#midwrap {
    width:80%;
    height:90%;
border-left:1px solid #c4c4c4;
    top:10px;
    position:relative;
    overflow: hidden;
    float:right; 
clear:right;
margin-right:47px;

}


.learntodesign{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:-78px;
top:196px;
}

#sidelinkslefttwo {
    margin-left:auto;
    margin-right:auto;
    float:left;
    height:25px;
    position:relative;
    /*removed clear from here*/
    float:left;
    margin-left:-25px;
    top:145px;

}

#sidelinkslefttwo li{
position:relative;
padding-top:3px;
list-style-type: none;
}

#sidelinkslefttwo li a{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinkslefttwo li a:hover{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#B0E2FF;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

#sidelinkslefttwo li a:active{
color:#000000;
font-size:13px;
font-family: sans-serif;
text-decoration:none;
background-color:#82CFFD;
height:17px;
position:relative;
border:1px solid black;
width:150px;
padding-left:3px;
padding-top:2px;
padding-bottom:2px;
display:block;
margin-bottom:2px;

}

.headerone{
color:#000000;;
font-size:25px;
font-family: sans-serif;
position:relative;
margin-left:15px;
}

.paragraph1{
color:#000000;;
font-size:14px;
font-family: sans-serif;
position:relative;
margin-left:15px;
}


.paragraph1tag{
color:#000000;;
font-size:16px;
font-family: sans-serif;
position:relative;
margin-left:15px;
}
4

1 回答 1

0

首先,你不应该使用怪癖模式。不同的浏览器有不同的怪癖!

但老实说,这对我来说看起来不像是与浏览器相关的问题。在所有浏览器上,如果您将浏览器窗口设置得太窄,左侧的链接就会从视图中消失。虽然它发生在不同浏览器的不同宽度上,但这可能与使用的字体有关。

于 2013-07-01T14:31:50.307 回答