chrome

时间：2015-09-08 09:00:27

标签： html css twitter-bootstrap font-awesome

点击此导航菜单中的第一个下拉列表后，它会按预期加下划线，一旦菜单失去焦点（即点击页面上的其他位置），标签末尾的下划线就不会被删除。

仅在Chrome（版本45.0.2454.85 m）中发生

我希望最后的下划线完全删除。

可能的原因是font-awesome导致了chrome的一些问题。

图片澄清：

underline incorrect

Fiddle 

/* ========================================================================
 * Bootstrap: dropdown.js v3.3.5
 * http://getbootstrap.com/javascript/#dropdowns
 * ========================================================================
 * Copyright 2011-2015 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
 * ======================================================================== */


+ function($) {
  'use strict';

  // DROPDOWN CLASS DEFINITION
  // =========================

  var backdrop = '.dropdown-backdrop'
  var toggle = '[data-toggle="dropdown"]'
  var Dropdown = function(element) {
    $(element).on('click.bs.dropdown', this.toggle)
  }

  Dropdown.VERSION = '3.3.5'

  function getParent($this) {
    var selector = $this.attr('data-target')

    if (!selector) {
      selector = $this.attr('href')
      selector = selector && /#[A-Za-z]/.test(selector) && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7
    }

    var $parent = selector && $(selector)

    return $parent && $parent.length ? $parent : $this.parent()
  }

  function clearMenus(e) {
    if (e && e.which === 3) return
    $(backdrop).remove()
    $(toggle).each(function() {
      var $this = $(this)
      var $parent = getParent($this)
      var relatedTarget = {
        relatedTarget: this
      }

      if (!$parent.hasClass('open')) return

      if (e && e.type == 'click' && /input|textarea/i.test(e.target.tagName) && $.contains($parent[0], e.target)) return

      $parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this.attr('aria-expanded', 'false')
      $parent.removeClass('open').trigger($.Event('hidden.bs.dropdown', relatedTarget))
    })
  }

  Dropdown.prototype.toggle = function(e) {
    var $this = $(this)

    if ($this.is('.disabled, :disabled')) return

    var $parent = getParent($this)
    var isActive = $parent.hasClass('open')

    clearMenus()

    if (!isActive) {
      if ('ontouchstart' in document.documentElement && !$parent.closest('.navbar-nav').length) {
        // if mobile we use a backdrop because click events don't delegate
        $(document.createElement('div'))
          .addClass('dropdown-backdrop')
          .insertAfter($(this))
          .on('click', clearMenus)
      }

      var relatedTarget = {
        relatedTarget: this
      }
      $parent.trigger(e = $.Event('show.bs.dropdown', relatedTarget))

      if (e.isDefaultPrevented()) return

      $this
        .trigger('focus')
        .attr('aria-expanded', 'true')

      $parent
        .toggleClass('open')
        .trigger($.Event('shown.bs.dropdown', relatedTarget))
    }

    return false
  }

  Dropdown.prototype.keydown = function(e) {
    if (!/(38|40|27|32)/.test(e.which) || /input|textarea/i.test(e.target.tagName)) return

    var $this = $(this)

    e.preventDefault()
    e.stopPropagation()

    if ($this.is('.disabled, :disabled')) return

    var $parent = getParent($this)
    var isActive = $parent.hasClass('open')

    if (!isActive && e.which != 27 || isActive && e.which == 27) {
      if (e.which == 27) $parent.find(toggle).trigger('focus')
      return $this.trigger('click')
    }

    var desc = ' li:not(.disabled):visible a'
    var $items = $parent.find('.dropdown-menu' + desc)

    if (!$items.length) return

    var index = $items.index(e.target)

    if (e.which == 38 && index > 0) index-- // up
      if (e.which == 40 && index < $items.length - 1) index++ // down
        if (!~index) index = 0

    $items.eq(index).trigger('focus')
  }


  // DROPDOWN PLUGIN DEFINITION
  // ==========================

  function Plugin(option) {
    return this.each(function() {
      var $this = $(this)
      var data = $this.data('bs.dropdown')

      if (!data) $this.data('bs.dropdown', (data = new Dropdown(this)))
      if (typeof option == 'string') data[option].call($this)
    })
  }

  var old = $.fn.dropdown

  $.fn.dropdown = Plugin
  $.fn.dropdown.Constructor = Dropdown


  // DROPDOWN NO CONFLICT
  // ====================

  $.fn.dropdown.noConflict = function() {
    $.fn.dropdown = old
    return this
  }


  // APPLY TO STANDARD DROPDOWN ELEMENTS
  // ===================================

  $(document)
    .on('click.bs.dropdown.data-api', clearMenus)
    .on('click.bs.dropdown.data-api', '.dropdown form', function(e) {
      e.stopPropagation()
    })
    .on('click.bs.dropdown.data-api', toggle, Dropdown.prototype.toggle)
    .on('keydown.bs.dropdown.data-api', toggle, Dropdown.prototype.keydown)
    .on('keydown.bs.dropdown.data-api', '.dropdown-menu', Dropdown.prototype.keydown)

}(jQuery);
/*css */

.navigation ul {
  margin: 9px;
  padding: 0;
}
.navigation ul li {
  padding: 0 16px;
  display: inline;
}
.navigation ul ul li a {
  padding: 8px;
}
.navigation ul ul li {
  padding: 0;
}
.navigation ul li a i {
  display: inline
}
/*bootstrap stuff*/

a:hover {
  color: #2a6496;
  text-decoration: underline;
}
a {
  color: #428bca;
  text-decoration: none;
}
.dropdown {
  position: relative;
}
.dropdown-menu>li>a {
  display: block;
  padding: 3px 20px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333;
  white-space: nowrap;
}
.open>.dropdown-menu {
  display: block;
}
.dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1000;
  display: none;
  float: left;
  min-width: 160px;
  padding: 5px 0;
  margin: 2px 0 0;
  font-size: 14px;
  list-style: none;
  background-color: #fff;
  border: 1px solid #ccc;
  border: 1px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  background-clip: padding-box;
}
body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
/*font-awesome*/

@font-face{

font-family:FontAwesome;
 src:url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.eot?v=4.4.0) format('eot'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.woff?v=4.4.0) format('woff'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.ttf?v=4.4.0) format('truetype'),
url(https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/fonts/fontawesome-webfont.svg?v=4.4.0#fontawesomeregular) format('svg');
 font-weight:400;
font-style:normal;

}
.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  font-size: inherit;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transform: translate(0, 0);
}
.fa-angle-down:before {
  content: "\f107";
}
.fa-home:before {
  content: "\f015";
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navigation">
  <ul>
    <li>
      <a class="active"><i class="fa fa-home"></i>&nbsp;&nbsp;Home</a> 
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                with whitespace 
                <i class="fa fa-angle-down"></i>
             </a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                       has artifact
                  </a> 
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown">
                without whitespace <i class="fa fa-angle-down"></i></a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                      does not have artifact
                  </a> 
        </li>
      </ul>
    </li>
    <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                with whitespace 
                <i class="fa fa-angle-down"></i>
                and some text    
             </a>
      <ul class="dropdown-menu" role="menu">
        <li>
          <a>
                       it seems it only happens when ending on a font-awsome icon.
                  </a> 
        </li>
      </ul>
    </li>
    <li>
      <a>
                last item               
             </a> 
    </li>
  </ul>
</div>

我将如何解决这个问题？ 最好使用css，保持html完好无损。文本和箭头都应加下划线

-edit： 一些答案/评论指出，删除空格将解决这个问题 我还想了解为什么在丢失悬停/焦点后仍然有下划线的白色空间。

1 个答案:

答案 0 :(得分：0)

在结束</a>代码 -

之前删除不必要的“空格” 
<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Account <i class="fa fa-angle-down"></i>            </a>

像这样改变 - 

<a class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
                Account <i class="fa fa-angle-down"></i></a>
相关问题
最新问题