게시물의 길이는 죄송합니다. 이것은 아주 이상한 문제이며 최대한 많은 정보를 제공하고자합니다.이상한 CSS 동작
가로 탐색 메뉴에 사용하고있는 다음 CSS 규칙이 있습니다. 메뉴는 ASP : repeater W 항목의 데이터베이스 테이블을 사용하여 작성됩니다.
#nav
{
margin: 0px;
padding:0px;
list-style-type: none;
height: 20px;
margin-right:auto;
margin-left:auto;
width:726px;
}
#nav > li
{
margin:0px;
padding:0px;
display:inline-block;
color: #FFFFFF;
height:17px;
border:0px;
width:90.75px;
text-align:center;
position:relative;
float:left;
}
#nav > li > ul
{
margin:0px;
padding:0px;
position: absolute;
left: -999em;
display:block;
overflow:visible;
z-index:100;
width:150px;
background-color:#eee;
}
#nav > li:hover > ul
{
left:0px;
z-index:100;
box-shadow: 0px 0px 5px #555;
-moz-box-shadow: 0px 0px 5px #555;
-webkit-box-shadow: 0px 0px 5px #555;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
/* IE 5-7 */
filter: alpha(opacity=80);
/* Netscape */
-moz-opacity: 0.8;
/* Safari 1.x */
-khtml-opacity: 0.8;
/* Good browsers */
opacity: 0.8;
}
#nav > li > ul > li
{
left:0px;
display:block;
color:#333;
width:150px;
text-align:left;
height:auto;
}
#nav a, #navbottom a
{
line-height:20px;
display:block;
height:20px;
border-bottom:2px solid #0c1b53;
}
#nav a:link, #navbottom a:link, #nav a:visited, #navbottom a:visited
{
border-bottom:2px solid #0c1b53;
color: #FFFFFF;
text-decoration: none;
}
#nav a:hover, #navbottom a:hover
{
border-bottom:2px solid #fff;
}
#nav a:active, #navbottom a:active
{
border-bottom:2px solid #fff;
color: #FEFFBD;
text-decoration: none;
}
#nav > li > ul > li a:link
{
margin:10px;
line-height:15px;
height:auto;
color:#444;
border-bottom: 1px solid #777;
/* IE 8 */
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
/* IE 5-7 */
filter: alpha(opacity=100);
/* Netscape */
-moz-opacity: 1.0;
/* Safari 1.x */
-khtml-opacity: 1.0;
/* Good browsers */
opacity: 1.0;
}
#nav > li > ul > li a:hover
{
color:#222;
border-bottom: 1px solid #555;
}
가 생산하는 HTML은 다음과 같습니다 :
<ul id="nav">
<li>
<input type="hidden" name="ctl00$TopNavRepeat$ctl01$LinkIdField1" id="ctl00_TopNavRepeat_ctl01_LinkIdField1" value="1" />
<a id="ctl00_TopNavRepeat_ctl01_HyperLink1" title="Home Page" href="../default.aspx">Home </a>
<ul></ul>
</li>
<li>
<input type="hidden" name="ctl00$TopNavRepeat$ctl02$LinkIdField1" id="ctl00_TopNavRepeat_ctl02_LinkIdField1" value="10" />
<a id="ctl00_TopNavRepeat_ctl02_HyperLink1" title="News from the IMA" href="../news/list.aspx">News </a>
<ul></ul>
</li>
<li>
<input type="hidden" name="ctl00$TopNavRepeat$ctl03$LinkIdField1" id="ctl00_TopNavRepeat_ctl03_LinkIdField1" value="11" />
<a id="ctl00_TopNavRepeat_ctl03_HyperLink1" title="About the IMA" href="../organisation/history.aspx">Organisation </a>
<ul>
<li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl01_HyperLink1" title="about the IMA" class="dropdown_Item" href="../organisation/history.aspx">About </a>
</li>
<li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl02_HyperLink1" title="This is a description" class="dropdown_Item" href="list.aspx?type=all">Members </a>
</li>
<li><a id="ctl00_TopNavRepeat_ctl03_DropDownList_ctl03_HyperLink1" class="dropdown_Item" href="../Boats/list.aspx#">Boats</a>
</li>
</ul>
</li>
<li>
<input type="hidden" name="ctl00$TopNavRepeat$ctl06$LinkIdField1" id="ctl00_TopNavRepeat_ctl06_LinkIdField1" value="14" />
<a id="ctl00_TopNavRepeat_ctl06_HyperLink1" href="../adverts">Ads </a>
<ul>
<li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl01_HyperLink1" title="All For Sale Items" class="dropdown_Item" href="../adverts/list.aspx?type=sale">For Sale </a>
</li>
<li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl02_HyperLink1" title="All Wanted Items" class="dropdown_Item" href="../adverts/list.aspx?type=wanted">Wanted </a>
</li>
<li><a id="ctl00_TopNavRepeat_ctl06_DropDownList_ctl03_HyperLink1" title="Advertise with the IMA" class="dropdown_Item" href="../adverts/edit.aspx?action=New">Post an Ad </a>
</li>
</ul>
</li>
</ul>
이 (일부 목록 항목이 곤란 생략 된) 생산하는 메뉴는 다음과 같습니다. 세 개의 하위 항목이있는 두 개의 항목 "Organization"과 "Ads"에도 불구하고 각 하위 항목이 동일 하긴하지만 조직의 두 번째 항목에는 nav> li> 대신 a> nav> li> a의 규칙이 표시됩니다.
As the menu displays http://dl.dropbox.com/u/4913815/Untitled.png
내가 그것을 통해가는 지금까지 내가 무슨 일이 일어나고 있는지 알 어차피로했습니다. 아무도 이것을 설명 할 수 있습니까?
이것이 어떻게 문제를 일으키는 지 모르겠지만 회원은 부모 디렉토리 "../"에 대한 참조가없는 유일한 사용자입니다. 테스트로서 아마도 회원의 URL을 "../organisation/history.aspx"로 변경해보십시오. 원하는 방식이 아니더라도 그것이 이상한 특이 사항을 나타낼 수도 있습니다. – AaronLS
이 코드와 CSS를 파이어 버그에 붙여 넣으면 올바르게 나온다. Members 항목은 다른 항목으로 적용된 CSS와 동일한 nav> li> ul> li를 가져옵니다. Firebug 플러그인을 사용하여 Firefox에서 사이트를로드하는 경우 멤버가 일부 스타일을 상속 받았다는 것을 확인할 수 있습니다. – AaronLS
은 회원 링크가 자신을 #nav : active에서 상속 받고 활성으로 정의했기 때문에 #nav> li> ul> li a : link 규칙을 덮어 썼습니다. 도와 주셔서 감사합니다 –