php - 如何正确实现字距调整生成的代码

Question

我有一个情况试图在 <header> 中实现，一个使用字距调整技术的 Logo 文本，这个简单但非常方便 tool由 Mr.Andrew 制作(特别感谢)。

修改前我有这个<header> header.php 中的部分:

...
        <!-- Start Header -->

        <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">

            <div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">

                <?php if ($header_style == 'style2') { ?>

                    <a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"

                    title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"

                    rel="home"><?php bloginfo( 'name' ); ?>

                    </a>

                <?php } ?>

            </div>

            <?php if ($header_style != 'style2') { ?>

            <div class="small-7 medium-4 columns logo">

                <?php if ($header_style == 'style1') { ?>

                    <a class="logotext" href="<?php echo esc_url( home_url( '/' ) ); ?>"

                    title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>"

                    rel="home"><?php bloginfo( 'name' ); ?>

                    </a>

                <?php } ?>

            </div>

            <?php } ?>

            <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">

                <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>

                <?php if ($full_menu_true) { ?>

                    <nav id="full-menu" role="navigation">

                        <?php if ($page_menu) { ?>

                            <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>

                        <?php } else  if(has_nav_menu('nav-menu')) { ?>

                          <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>

                        <?php } else { ?>

                            <ul class="full-menu">

                                <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>

                            </ul>

                        <?php } ?>

                    </nav>

                <?php } ?>

                <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>

                <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>

                <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">

                    <div>

                        <span></span><span></span><span></span>

                    </div>

                </a>

            </div>

        </header>

        <!-- End Header -->
...

使用生成的字距调​​整 code , 我试过了(如果这对 php 编码来说是一个糟糕的方法，请纠正我):

...
        <!-- Start Header -->
    <header class="header row no-padding <?php echo $header_style; ?>" data-equal=">.columns" role="banner">                        
        <div class="row max_width ">
            <div class="small-7 medium-4 columns logo<?php if ($header_style == 'style1') { ?> show-for-large-up<?php } ?>">
                <?php if ($header_style == 'style2') { ?>
                    <span class="logotext" style="letter-spacing: -18px;">n</span>
                    <span class="logotext" style="letter-spacing: -17px;">e</span>
                    <span class="logotext" style="letter-spacing: -18.5px;">u</span>
                    <span class="logotext" style="letter-spacing: -13px;">e</span>
                    <span class="logotext" style="letter-spacing: -23.5px;">g</span>
                    <span class="logotext" style="letter-spacing: -7px;">r</span>
                    <span class="logotext" style="letter-spacing: -19px;">i</span>
                    <span class="logotext">d</span>
                <?php } ?>
            </div>          
        </div>              
                <?php if ($header_style != 'style2') { ?>                       
        <div class="row max_width ">            
            <div class="small-7 medium-4 columns logo">
                <?php if ($header_style == 'style1') { ?>
                    <span class="logotext" style="letter-spacing: -18px;">n</span>
                    <span class="logotext" style="letter-spacing: -17px;">e</span>
                    <span class="logotext" style="letter-spacing: -18.5px;">u</span>
                    <span class="logotext" style="letter-spacing: -13px;">e</span>
                    <span class="logotext" style="letter-spacing: -23.5px;">g</span>
                    <span class="logotext" style="letter-spacing: -7px;">r</span>
                    <span class="logotext" style="letter-spacing: -19px;">i</span>
                    <span class="logotext">d</span>
                <?php } ?>
            </div>          
        </div>  
    <?php } ?>                      
        <div class="row max_width ">        
            <div class="small-5 <?php if ($header_style == 'style2') { echo 'medium-8'; } else { echo 'medium-4';} ?> columns menu-holder">
                <?php $full_menu_true = ($menu_mobile_toggle_view == 'style2' && $header_style == 'style2');?>
                <?php if ($full_menu_true) { ?>
                    <nav id="full-menu" role="navigation">
                        <?php if ($page_menu) { ?>
                            <?php wp_nav_menu( array( 'menu' => $page_menu, 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown  ) ); ?>
                        <?php } else  if(has_nav_menu('nav-menu')) { ?>
                          <?php wp_nav_menu( array( 'theme_location' => 'nav-menu', 'depth' => 2, 'container' => false, 'menu_class' => 'full-menu', 'walker' => new thb_mobileDropdown ) ); ?>
                        <?php } else { ?>
                            <ul class="full-menu">
                                <li><a href="<?php echo get_admin_url().'nav-menus.php'; ?>">Please assign a menu from Appearance -> Menus</a></li>
                            </ul>
                        <?php } ?>
                    </nav>
                <?php } ?>
                <?php if ($header_search != 'off') { do_action( 'thb_quick_search' ); } ?>
                <?php if ($header_cart != 'off') { do_action( 'thb_quick_cart' ); } ?>
                <a href="#" data-target="open-menu" class="mobile-toggle<?php if (!$full_menu_true) { ?> always<?php } ?>">
                    <div>
                        <span></span><span></span><span></span>
                    </div>
                </a>
            </div>          
        </div>  
    </header>
    <!-- End Header -->
...

现在，不太确定为什么，the result在 Chrome 中看起来应该如此，但在 IE11/Firefox 中，字母在垂直位置以某种方式被打乱。

有什么想法吗？

LE:恕我直言，我必须重新考虑答案验证，因为建议无助于正确实现解决方案，It looks ok在 Chrome 中，但在 IE/Firefox 中，字距调整值(这个问题的主要主题)没有任何效果。

希望你们不要介意，但我仍然需要一个答案来结束这个问题，为我和将来处理这个问题的其他人提供正确的解决方案。如果我没有理解正确的实现步骤，可以通过实际示例获得更具体的答案，我并不懒惰，只是一个纯粹的菜鸟(我已经在我的帖子中提到过)。谢谢。

Answer 1

问题是您的 .logo div 被限制为 33% 宽度，因为它还有 .medium-4类(class)。

IE 和 Firefox 实际上正确地处理了这个问题。无论出于何种原因，chrome 都会让内容超出容器的指定宽度；这与 display 有关.logo 的属性被设置为 table .

解决方案是删除 medium-4 (和 small-7)类并使用正确的脚手架类或在 CSS 中定义宽度。