php
  • css
  • wordpress
  • offset
  • 2013-03-04 63 views 0 likes 
    0

    我在我的网站上使用wordpress,marblesandmore.com,并且有一个我目前正在调整的主题。 该网站在使用WordPress使用菜单功能的构建和项目使用的Cufón和CSS。菜单项没有相同的高度

    问题如下: - 最后2个项目有偏移...? - 这只在Chrome和IE中可见。

    PHP的使用:

    <div id="menu"> 
          <?php $menuClass = 'nav superfish clearfix'; 
          $menuID = 'secondary-menu'; 
          $secondaryNav = ''; 
          if (function_exists('wp_nav_menu')) { 
           $secondaryNav = wp_nav_menu(array('theme_location' => 'secondary-menu', 'container' => '', 'fallback_cb' => '', 'menu_class' => $menuClass, 'menu_id' => $menuID, 'echo' => false, 'walker' => new description_walker())); 
          }; 
          if ($secondaryNav == '') { ?> 
           <ul id="<?php echo $menuID; ?>" class="<?php echo $menuClass; ?>"> 
            <?php if (get_option('estore_swap_navbar') == 'false') { ?> 
             <?php show_categories_menu($menuClass,false); ?> 
            <?php } else { ?> 
             <?php if (get_option('estore_home_link') == 'on') { ?> 
              <li <?php if (is_home()) echo('class="current_page_item"') ?>><a href="<?php bloginfo('url'); ?>"><?php esc_html_e('Home','eStore') ?></a></li> 
             <?php }; ?> 
    
             <?php show_page_menu($menuClass,false,false); ?> 
            <?php } ?> 
           </ul> <!-- end ul#nav --> 
          <?php } 
          else echo($secondaryNav); ?> 
    </div> <!-- #menu --> 
    

    的CSS:

    ul#secondary-menu { padding: 24px 0px 0px 23px; margin-top:24px; } 
    ul#secondary-menu li { padding-right: 20px; } 
    ul#secondary-menu li.current_page_item > a > strong, ul#secondary-menu li.current-menu-item > a > strong { color:#ede7c2; } 
    ul#secondary-menu li a strong { color:#000000; text-transform: lowercase; font-size:16px; font-weight:normal; text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); margin-bottom:-3px; } 
    ul#secondary-menu li a span { color: #828282; font-family: arsmaquettepro,Helvetica, sans-serif; /*text-shadow: 1px 1px 1px #2d2d2d;*/ } 
    ul#secondary-menu li a:hover { text-decoration: none; } 
    ul#secondary-menu li a:hover strong { color: #ede7c2; } 
    ul#secondary-menu li a:hover span, ul#secondary-menu li > a > span { color: #7b786a; } 
    

    应该有第4项和接下来的2

    任何想法,没有任何区别是什么原因造成的偏差?

    Marblesandmore.com

    编辑:下面的答案似乎是正确的,所以解决方案必须是在子菜单中的CSS:

    ul#secondary-menu ul { width: 178px; background: url(images/secondary-dropdown.png) repeat-y; padding: 3px 0px 15px; box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); -moz-box-shadow:3px 6px 7px 1px rgba(0, 0, 0, 0.5); -webkit-box-shadow: 3px 6px 7px 1px rgba(0, 0, 0, 0.5); border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border-top-left-radius: 0px; -moz-border-radius-topleft: 0px; -webkit-border-top-left-radius: 0px; border-top-right-radius: 0px; -moz-border-radius-topright: 0px; -webkit-border-top-right-radius: 0px; border: 1px solid #ffffff; border-top: none; } 
    ul#secondary-menu li:hover ul, ul#secondary-menu li.sfHover ul { left:0px; top:43px; } 
    ul#secondary-menu li:hover ul ul, ul#secondary-menu li.sfHover ul ul { left:173px; top:-3px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; border: 1px solid #232323; }       
    ul#secondary-menu ul li { background: url(images/secondary-dropdown-bottom.png) repeat-x bottom left; padding: 0px 0px 2px 2px; } 
    ul#secondary-menu ul li a { display: block; padding: 9px 3px 9px 28px; width: 145px; /*font-weight: bold; */font-size:14px; color: #000000; font-family: arsmaquettepro, Helvetica, Arial, sans-serif; /*text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.3); background: url(images/secondary-dropdown-bullet.png) no-repeat 15px 17px;*/ } 
    ul#secondary-menu ul li a:hover { background-color: #383838; color: #ede7c2; } 
    
    +0

    指定URL链接.. – 2013-03-04 11:07:03

    +0

    或错误 – 2013-03-04 11:12:10

    +0

    PFF的任何图像,愚蠢的我, marblesandmore.com – 2013-03-04 11:14:15

    回答

    0

    最后2对象只能有一个16像素高度,而其他菜单对象有18px。

    编辑:对不起,我刚刚意识到这个答案有多糟糕,没有告诉你问题在哪里。将尝试检查它。

    我认为这与最后2个菜单项没有子菜单有关,不知何故这些子菜单的ul标签似乎将2px添加到高度。

    好吧,这不是一个“很好”的解决方案,说实话很难看,但我认为它的工作原理。您可以通过使用它们的ID并在顶部添加一个页边空白来针对菜单中最后两项。

    #menu-item-3606, #menu-item-3604 { 
    margin-top: 2px; 
    } 
    

    只记得,如果u曾经以任何方式更改这些菜单项,他们将有新的标识符,所以你需要改变的ID在CSS。正如我所说,不是一个好的解决方案,但它的工作。

    如果由于某种原因将子菜单添加到这两个菜单项中,也会出现问题。

    +0

    你是对的!解决了这个问题! 现在我必须弄清楚2个像素来自哪里!非常感谢你! – 2013-03-04 14:22:19

    +0

    改变了一下答案,这应该工作。 – Millenjo 2013-03-04 15:16:45

    +0

    WEIRD!奇怪的是,这并不适用于Chrome中的任何更改。 然而,在Firefox中,它改变了它的错误方式(在FF中,项目已经在线) – 2013-03-04 15:44:54

    0

    我觉得你的问题可能的原因是:

    margin-bottom:-3px; 
    

    ul#secondary-menu li a strong 
    

    选择。

    我看不到你的页面,所以我不知道这个答案。

    0

    @Bart van Sleeuwen请从样式中删除该课程。CSS

    ul#secondary-menu li#menu-item-3604 strong { color:#666666; } 
    ul#secondary-menu li#menu-item-3606 strong { color:#666666; } 
    

    和HTML找到李类

    <li id="menu-item-3604" class="menu-item menu-item-type-post_type menu-item-object-page"> 
    

    改变它喜欢这个

    <li id="menu-item-3604" class="menu-item menu-item-type-custom menu-item-object-custom"> 
    
    +0

    奥克,但它不会改变高度:) – 2013-03-04 14:19:52

    +0

    @ Bart van Sleeuwen使用顶部:3px而不是顶部:1px对于li风格的联系请标记我的回答作为答案,如果它是提供给解决方案的指导。 – snowp 2013-03-04 14:52:47

    +0

    @ Bart van Sleeuwen否则使用class ** menu-item menu-item-type-custom menu-item-object-custom **而不是** menu-item menu-item-type-post_type menu-item-object-page ** li联系人的类别 – snowp 2013-03-04 14:56:48

    相关问题