IE - 保证金:0; CSS渲染问题

时间:2014-11-24 03:02:38

标签: html css internet-explorer

我对最新的IE有一个非常奇怪的渲染问题(不了解其他人)。

这是它在chrome(正确方式)中的外观:http://i.imgur.com/0xTakai.png

现在看看IE:http://i.imgur.com/2iptseA.png(忽视角落里的东西,不是问题)

但是这里有奇怪的部分,当我取消选中并重新检查开发工具margin:0;中的#cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a { margin: 0 !important; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu { width: 100%; font-family: Helvetica, Arial, sans-serif; color: #ffffff; } #cssmenu ul ul { display: none; } #cssmenu > ul > li.active > ul { display: block; } .align-right { float: right; } #cssmenu > ul > li > a { padding: 15px 20px; border-left: 1px solid #1682ba; border-right: 1px solid #1682ba; border-top: 1px solid #1682ba; cursor: pointer; z-index: 2; font-size: 14px; font-weight: bold; text-decoration: none; color: #ffffff; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35); background: #36aae7; background: -webkit-linear-gradient(#36aae7, #1fa0e4); background: -moz-linear-gradient(#36aae7, #1fa0e4); background: -o-linear-gradient(#36aae7, #1fa0e4); background: -ms-linear-gradient(#36aae7, #1fa0e4); background: linear-gradient(#36aae7, #1fa0e4); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15); } #cssmenu > ul > li > a:hover, #cssmenu > ul > li.active > a, #cssmenu > ul > li.open > a { color: #eeeeee; background: #1fa0e4; background: -webkit-linear-gradient(#1fa0e4, #1992d1); background: -moz-linear-gradient(#1fa0e4, #1992d1); background: -o-linear-gradient(#1fa0e4, #1992d1); background: -ms-linear-gradient(#1fa0e4, #1992d1); background: linear-gradient(#1fa0e4, #1992d1); } #cssmenu > ul > li.open > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15); border-bottom: 1px solid #1682ba; } #cssmenu > ul > li:last-child > a, #cssmenu > ul > li.last > a { border-bottom: 1px solid #1682ba; } .holder { width: 0; height: 0; position: absolute; top: 0; right: 0; } .holder::after, .holder::before { display: block; position: absolute; content: ""; width: 6px; height: 6px; right: 20px; z-index: 10; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } .holder::after { top: 17px; border-top: 2px solid #ffffff; border-left: 2px solid #ffffff; } #cssmenu > ul > li > a:hover > span::after, #cssmenu > ul > li.active > a > span::after, #cssmenu > ul > li.open > a > span::after { border-color: #eeeeee; } .holder::before { top: 18px; border-top: 2px solid; border-left: 2px solid; border-top-color: inherit; border-left-color: inherit; } #cssmenu ul ul li a { cursor: pointer; border-bottom: 1px solid #32373e; border-left: 1px solid #32373e; border-right: 1px solid #32373e; padding: 10px 20px; z-index: 1; text-decoration: none; font-size: 13px; color: #eeeeee; background: #49505a; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul li:hover > a, #cssmenu ul ul li.open > a, #cssmenu ul ul li.active > a { background: #424852; color: #ffffff; } #cssmenu ul ul li:first-child > a { box-shadow: none; } #cssmenu ul ul ul li:first-child > a { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); } #cssmenu ul ul ul li a { padding-left: 30px; } #cssmenu > ul > li > ul > li:last-child > a, #cssmenu > ul > li > ul > li.last > a { border-bottom: 0; } #cssmenu > ul > li > ul > li.open:last-child > a, #cssmenu > ul > li > ul > li.last.open > a { border-bottom: 1px solid #32373e; } #cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a { border-bottom: 0; } #cssmenu ul ul li.has-sub > a::after { display: block; position: absolute; content: ""; width: 5px; height: 5px; right: 20px; z-index: 10; top: 11.5px; border-top: 2px solid #eeeeee; border-left: 2px solid #eeeeee; -webkit-transform: rotate(-135deg); -moz-transform: rotate(-135deg); -ms-transform: rotate(-135deg); -o-transform: rotate(-135deg); transform: rotate(-135deg); } #cssmenu ul ul li.active > a::after, #cssmenu ul ul li.open > a::after, #cssmenu ul ul li > a:hover::after { border-color: #ffffff; } 时,它正确格式化。 http://i.imgur.com/MPlFval.png

任何想法是什么导致它以及如何解决它?我想使用javascript作为最后的手段,尽可能避免使用它。

有点长,但这里是负责菜单的完整CSS:

<div id='cssmenu'>
<img src="img/sidelogo.png" width="50%" />
<ul>
   <li class='active'><a href='index.html'><span>Home</span></a></li>
   <li><a href='#' class="sb-close"><span>About</span></a></li>
   <li class='has-sub'><a href='#'><span>Labs</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Experiments</span></a>
            <ul>
               <li><a href='#' class="sb-close"><span>Exp 001</span></a></li>
               <li class='last'><a href='#' class="sb-close"><span>Exp 002</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#' ><span>Projects</span></a>
            <ul>
               <li><a href='//knyz.org/design/Deep Space/' class="sb-close"><span>Deep Space</span></a></li>
               <li><a href='//knyz.org/design/Deep Space Dark/' class="sb-close"><span>Deep Space Dark</span></a></li>
               <li class='last'><a href='//mdd.knyz.org/' class="sb-close"><span>MDD</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='docs' class="sb-close"><span>Documents</span></a></li>
   <li><a href='#' class="sb-close"><span>Archives</span></a></li>
   <li class='last'><a href='#' class="sb-close"><span>Contact</span></a></li>
</ul>
</div>

HTML:

{{1}}

0 个答案:

没有答案