个人中心
gpt4 book ai didi

css - Wordpress 水平菜单在 IE 中显示为垂直

转载 作者：行者123 更新时间：2023-11-28 10:26:38 27 4
gpt4 key购买 nike

我的 wordpress 网站在除 Internet Explorer 之外的所有浏览器上都能正常工作。在 Internet Explorer 8 中，我所有的菜单都是垂直显示的，而我原来的菜单是水平的，

所有浏览器如 chrome 和 firefox 显示完美但不是 IE

使用 IE 8 查看此处:http://www.booksofvirtue.com/

CSS-

.main-navigation {
margin: 0 auto;
max-width: 66.75;
min-height: 45px;
position: relative;
}

ul.nav-menu,
div.nav-menu > ul {
margin: 0;
padding: 15px 0px 0 0;
text-align: right;
}

.nav-menu li {
display: inline-block;
position: relative;
}

.nav-menu li a {
color: #3b3b3d;
display: block;
font-size: 16px;
font-family: 'Archivo Narrow', sans-serif;
text-transform: uppercase;
line-height: 1;
padding: 10px;
text-decoration: none;
}

.nav-menu li:hover > a,
.nav-menu li a:hover {
border-bottom: 0px solid #e9e9e9;
}

.nav-menu .sub-menu,
.nav-menu .children {
-moz-box-shadow: 0 0px 8px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 0px 8px rgba(0,0,0,0.2);
box-shadow:0 0px 8px rgba(0,0,0,0.2);
background:#fff;
display: none;
padding: 0;
position: absolute;
left: -25px;
color: #3b3b3d;
z-index: 99999;
text-align: left;
}

.nav-menu .sub-menu ul,
.nav-menu .children ul {
border-left: 0;
left: 145px;
top: 0;
}

ul.nav-menu ul a,
.nav-menu ul ul a {
color: #3b3b3d;
margin: 0;
width: 160px;
border-bottom: 1px solid #ccc;
}

ul.nav-menu ul a:hover, .nav-menu ul ul a:hover {
color: #fff;
border-bottom: 1px solid #ccc;
    -webkit-animation-name: fadeIn;
-moz-animation-name: fadeIn;
-o-animation-name: fadeIn;
animation-name: fadeIn;
animation-delay: 0s; /* W3C and Opera */
-moz-animation-delay: 0s; /* Firefox */
-webkit-animation-delay: 0s; /* Safari and Chrome */
-webkit-animation-fill-mode:both;
-moz-animation-fill-mode:both;
-ms-animation-fill-mode:both;
-o-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-duration:1s;
-moz-animation-duration:1s;
-ms-animation-duration:1s;
-o-animation-duration:1s;
animation-duration:1s;

}

ul.nav-menu li:hover > ul,
.nav-menu ul li:hover > ul {
display: block;
}

.menu-toggle {
display: none;
}

和

标题.php

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>

<!--  Basic Page Needs -->
<meta charset="<?php bloginfo( 'charset' ); ?>" />
<title><?php global $page, $paged;
    wp_title( '', true, 'right' );
    ?></title>
<meta name="description" content="">
<meta name="author" content="">

<!-- Favicon -->
<?php if ( ot_get_option('wpl_favicon') ) { ?>
    <link rel="shortcut icon" href="<?php echo ot_get_option('wpl_favicon');  ?    >">
    <link rel="apple-touch-icon" href="<?php echo ot_get_option('wpl_favicon');   ?>" />
<?php } ?>

<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-   scale=1">

<!-- CSS -->
<link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo(  'stylesheet_url' ); ?>" />
<?php if ( is_singular() ) wp_enqueue_script( "comment-reply" ); ?>
<?php wp_head(); ?>


</head>
<body <?php body_class(); ?>>
<div id="page">

    <!-- Toolbar -->
    <div id="toolbar">
        <div class="container_16">

            <div class="grid_16">


                    <?php
                        if ( has_nav_menu( 'language' ) ) { 
                            wp_nav_menu( array('depth' => '3', 'theme_location' => 'language' ));
                    } ?> 


                <ul class="tb-list">
                    <?php if ( ot_get_option('wpl_phone_number') != "") { ?>
                        <li class="phone"><a href="tel:<?php echo ot_get_option('wpl_phone_number') ?>" ><?php _e('Tel.:', 'wplook'); ?><?php echo ot_get_option('wpl_phone_number') ?></a></li>
                    <?php } ?>

                    <?php if ( ot_get_option('wpl_rss_link') != "") { ?>
                        <li class="rss"><a href="<?php echo ot_get_option('wpl_rss_link') ?>"><i class="icon-feed2"></i></a></li>
                    <?php } ?>

                    <?php if ( ot_get_option('wpl_contact_page_link') != "") { ?>
                        <li class="contact"><a href="<?php echo get_page_link(ot_get_option('wpl_contact_page_link')); ?>"><i class="icon-envelope"></i></a></li>
                    <?php } ?>

                    <?php if ( ot_get_option('wpl_contact_email') != "") { ?>
                        <li class="contact"><a href="mailto:<?php echo ot_get_option('wpl_contact_email'); ?>"><i class="icon-envelope"></i></a></li>
                    <?php } ?>

                    <?php if ( ot_get_option('wpl_group_icons') != "off") { ?>

                        <?php $toolbar_share = ot_get_option( 'toolbar_share', array() ); ?>
                        <?php if( $toolbar_share ) : ?>
                            <li class="share"><a href="#"><i class="icon-share"></i></a>
                                <ul class="share-items radius-bottom">
                                    <?php foreach( $toolbar_share as $item ) : ?>
                                        <li class="share-item-<?php echo $item['wpl_share_item_icon']; ?> radius"><a target="_blank" title="<?php echo $item['wpl_share_item_name']; ?>" href="<?php echo $item['wpl_share_item_url']; ?>"><i class="<?php echo $item['wpl_share_item_icon']; ?>"></i></a></li>
                                    <?php endforeach; ?>
                                </ul>
                            </li>
                        <?php endif; ?>

                    <?php } else { ?>


                        <?php $toolbar_share =   ot_get_option( 'toolbar_share', array() ); ?>
                        <?php if( $toolbar_share ) : ?>
                            <?php foreach( $toolbar_share as $item ) : ?>
                                <li class="share-item-<?php echo $item['wpl_share_item_icon']; ?> mt"><a target="_blank" title="<?php echo $item['wpl_share_item_name']; ?>" href="<?php echo $item['wpl_share_item_url']; ?>"><i class="<?php echo $item['wpl_share_item_icon']; ?>"></i></a></li>
                            <?php endforeach; ?>
                        <?php endif; ?>

                    <?php } ?>

                    <?php if ( ot_get_option('wpl_search_form')  == "on") { ?>
                        <li class="search"><a href="#"><i  class="icon-search"></i></a>
                            <ul class="search-items  radius-bottom">
                                <li>
                                    <div  class="search-form">
                                         <form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
                                             <div>
                                                 <input type="text" value="<?php _e('Search for...', 'wplook'); ?>" name="s" id="s" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"/>
                                                 <input type="submit" id="searchsubmit" value="Search" />
                                             </div>
                                         </form>
                                    </div>
                                </li>
                            </ul>
                        </li>
                    <?php } ?>

                    <?php if ( ot_get_option('wpl_donete_link')  != "") { ?>
                        <li class="donate"><a href="<?php echo ot_get_option('wpl_donete_link') ?>"><?php _e('Donate', 'wplook'); ?> <i class="icon-heart"></i></a></li>
                    <?php } ?>

                </ul>
                <div class="clear"></div>
            </div>
        </div>
        <div class="clear"></div>
    </div>
    <!-- /#toolbar -->

    <header id="branding" class="site-header" role="banner">
        <div id="sticky_navigation">
            <div class="container_16">
                <hgroup class="fleft grid_5">
                        <h1 id="site-title">
                            <a href="<?php echo  esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display'  ) ); ?> - <?php bloginfo('description'); ?>" rel="home">
                        <?php
                        if ( ot_get_option('wpl_logo') != ''){?>
                                <img src="<?php     echo ot_get_option('wpl_logo'); ?>">
                            <?php } else {
                                bloginfo('name');
                            }?>
                        </a></h1>
                            <h2 id="site-description">    <?php bloginfo('description'); ?></h2>
                </hgroup>

                <nav role="navigation" class="site-navigation main-navigation grid_11" id="site-navigation">
                    <?php wp_nav_menu( array('menu_class' => 'nav-menu',  'theme_location' => 'primary' )); ?>
                </nav>

                <!-- Mobile navigation -->

                <div class="grid_16 mob-nav"></div>

                <!-- .site-navigation .main-navigation -->
                <div class="clear"></div>
            </div>
        </div>
    </header>
    <!-- #masthead .site-header -->

最佳答案

确保你完全加载了网页，因为它在使用 IE11 仿真的 IE6+ 上对我来说非常适合

关于css - Wordpress 水平菜单在 IE 中显示为垂直，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23714857/

27 4 0
文章推荐： html - Flexbox 居中在 IE 11 中不起作用
文章推荐： regex - matchesInString 函数在 Swift 中返回一个空数组
文章推荐： javascript - 为 Kwicks jQuery 插件创建 onAfter 事件
文章推荐： java - 从 Java 调用 JavaScript 方法
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com