0
화면이 @media (mobile ~) 너비로 축소되면 오른쪽 상단에 트위터 부트 스트랩 아이콘과 같은 옵션 아이콘을 만들려고합니다. 리버스 엔지니어링을 조금 해 크롬과 사파리에서 아이콘을 다시 만들 수있었습니다. 그러나 그것은 파이어 폭스에서 약간 다르며 IE8에서는 크게 다르다.twitter bootstrap과 같은 가로 막대 아이콘
이 문제를 해결하는 데 도움이 필요하십니까.
HTML :
<html>
<head>
<link rel="stylesheet" type="text/css" href="optionspanel.css" />
</head>
<body>
<ul id="nav">
<li>
<button type="button" class="fw-opt-panel">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a id="optionsicon" href="#" class="selected"></a>
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#" class="selected">Item 02</a></li>
<li><a href="#">Item 03</a></li>
</ul>
<div class="clear"></div>
</li>
</ul>
<div class="clear"></div>
</body>
</html>
CSS :
.fw-opt-panel {
background-color: rgb(14, 14, 14);
background-image: -webkit-linear-gradient(top, rgb(21, 21, 21), rgb(4, 4, 4));
border-bottom-color: rgba(0, 0, 0, 0.247059);
border-radius: 4px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.0980392);
border-width: 1px;
border-top-width: 1px;
box-shadow: rgba(255, 255, 255, 0.0980392) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.0745098) 0px 1px 0px 0px;
cursor: pointer;
float: right;
padding: 7px;
}
.icon-bar {
background-color: rgb(245, 245, 245);
border-radius: 1px;
cursor: pointer;
display: block;
height: 2px;
margin-top: 3px;
width: 18px;
}