0
我有一種情況試圖通過使用字距技術實現<header>，這種簡單但非常方便的由安德魯先生製作的tool（特別感謝）。如何正確實現字距生成代碼
修改之前，我曾在header.php本<header>部分：使用
...
<!-- 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：在所有應有的尊重下，我必須重新考慮答案驗證，因爲消化不利於Chrome正確實施解決方案，但在IE/Firefox中使用Kerning值（此問題的主要主題）它沒有任何作用。
希望你不介意傢伙，但我仍然需要一個答案來解決這個問題，爲我和將來處理這個問題的其他人提供正確的解決方案。如果我不明白正確的實施步驟，可以通過實際例子更具體地回答問題，我不懶惰，只是一個純粹的noob（我已經在我的帖子中提到過）。謝謝。
爲什麼你的網站使用網址縮短器？使用您的網站有什麼問題？ –
我在想保持搜索引擎的結果 - 比如Google，Bing等 - 乾乾淨淨，沒有指向論壇討論（是這樣嗎？）:) –
論壇？什麼論壇？無論如何，代碼的寬度爲33.333％，而''medium-4'的寬度爲div，而'small-7'類的寬度爲58.333％，class'columns'的寬度爲100％。也許這會讓瀏覽器感到困惑。 –