Chrome文本问题？

Question

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

我正在谈论的文本是链接上方页面左侧的“学习设计”和“资源”。我从来没有遇到过这个。

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; 
} 

Answer 1

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

但说实话，这对我来说并不像浏览器相关的问题。在所有浏览器中，如果浏览器窗口太窄，左侧的链接将从视图中消失。虽然它发生在不同浏览器的不同宽度，但这可能与所使用的字体有关。