0

Mozilla Firefox ではすべて問題なく表示され、問題はありませんが、Google Chrome で開くと、ページの左側のテキストが表示されず、何も表示されません。

私が話しているテキストは、リンクの上のページの左側にある「Learn To Design」と「Resources」です。私はこれまでにこれに遭遇したことはありません。

指定する.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

まず第一に、quirks モードは使用しないでください。ブラウザが異なれば、癖も異なります。

しかし、正直なところ、これはブラウザ関連の問題のようには見えません。すべてのブラウザで、ブラウザ ウィンドウを狭めすぎると、左側のリンクが表示されなくなります。ブラウザごとに異なる幅で発生しますが、それは使用されているフォントに関係している可能性があります.

于 2013-07-01T14:31:50.307 に答える