我有一种情况试图在<header>中实现一个使用字距调整技术的logotext，这个简单但非常方便的tool由安德鲁先生制作（特别感谢）。
在修改之前，我在<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中的Kerning值（这个问题的主题）它没有任何影响。希望你不要介意，但是我仍然需要一个答案来解决这个问题，为我和将来处理这个问题的其他人提供正确的解决方案。如果我没有理解正确的实施步骤，那么可以通过实例更具体地回答，我不是懒惰，只是一个纯粹的菜鸟（我在帖子中已经提到过）。谢谢。
答案 0 :(得分：1)
问题是您的.logo div被限制为33％宽度，因为它还具有.medium-4类。
IE和Firefox实际上正确地处理了这个问题。无论出于何种原因，铬使内容物超过容器的指定宽度;这与display设置为.logo的{{1}}属性有关。
解决方案是删除table（和medium-4）类，并使用正确的脚手架类或在CSS中定义宽度。