jquery – Twitter IE和Chrome中的Typeahead和bootstrap-tagsinput样式不正确

概要

我最近一直在为我的网站制作一个消息系统,该系统由Twitter Typeahead插件和bootstrap-tagsinput插件组成.但是当我在Internet Explorer和Google Chrome中加载我的页面时,我的CSS已经存在造型问题,而在Firefox中可以正常工作(可能是因为我用于开发和初始样式编辑).我想知道如何解决这个问题,因为我在css中不是很有经验,这就是为什么我试图让这个问题在眼睛上尽可能容易.

阅读下面我的问题.

在Firefox中开发(开发)

以下是我的输入框的图像在firefox中正常工作：

Internet Explorer样式问题(编辑：FIXED！)

>添加标签之前,输入框不与glyphicon对齐.

>输入文本不会与左侧的标签对齐.

>占位符字体颜色和样式与表格的其余部分不相符.

Google Chrome造型问题(编辑：固定)

类型头部下拉列表未正确对齐.
(只发生在第一个标签,否则工作正常).

码

我的HTML：

<span id="remote" class="input-group" style="padding-bottom:10px;">
  <span class="input-group-addon"><span class="glyphicon glyphicon-user" style="font-size: 15px;"></span></span>
  <input type="text" autocomplete="off" name="msgUser" id="msgUser" class="form-control tagsInput" placeholder="Users Seperated by,"/>
</span>

Typeahead CSS：

.accordion {
    margin-bottom:-3px;
}

.accordion-group { 
    border: none;
}

.twitter-typeahead .tt-query,.twitter-typeahead .tt-hint {
  margin-bottom: 0;
}

.twitter-typeahead .tt-hint
{
    display: none;
}

.tt-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;
  list-style: none;
  font-size: 14px;
  background-color: #ffffff;
  border: 1px solid #cccccc;
  border: 1px solid rgba(0,0.15);
  border-radius: 4px;
  -webkit-box-shadow: 0 6px 12px rgba(0,0.175);
  box-shadow: 0 6px 12px rgba(0,0.175);
  background-clip: padding-box;
}
.tt-suggestion > p {
  display: block;
  padding: 3px 5px;
  clear: both;
  font-weight: normal;
  line-height: 1.428571429;
  color: #333333;
  white-space: nowrap;
}
.tt-suggestion > p:hover,.tt-suggestion > p:focus,.tt-suggestion.tt-cursor p {
  color: #ffffff;
  text-decoration: none;
  outline: 0;
  background-color: #428bca;
}

Bootstrap Tagsinput CSS：

.bootstrap-tagsinput { width: 100%; }

.label-info {
  background-color: #ededed !important;
}
.label-info[href]:hover,.label-info[href]:focus {
  background-color: #ededed !important;
}

.bootstrap-tagsinput {
  background-color: #fff;
  border: 1px solid #ccc;
  box-shadow: inset 0 1px 1px rgba(0,0.075);
  display: inline-block;
  padding: 4px 6px;
  margin-bottom: 0px;
  color: #555;
  vertical-align: middle;
  max-width: 100%;
  line-height: 22px;
  cursor: text;
}
.bootstrap-tagsinput input {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  margin: 0;
  width: auto !important;
  max-width: inherit;
}
.bootstrap-tagsinput input:focus {
  border: none;
  box-shadow: none;
}
.bootstrap-tagsinput .tag {
  border: 1px solid #d9d9d9;
  margin-right: 2px;
  color: #555555;
}
.bootstrap-tagsinput .tag:hover {
  border-color: #b9b9b9;
}
.bootstrap-tagsinput .tag [data-role="remove"] {
  border: none;
  margin-left: 8px;
  cursor: pointer;
}
.bootstrap-tagsinput .tag [data-role="remove"]:after {
  content: "x";
  padding: 0px 2px;
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover {
  box-shadow: inset 0 1px 0 rgba(255,255,0.15),0 1px 2px rgba(0,0.15);
}
.bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
  box-shadow: inset 0 3px 5px rgba(0,0.15);
}

解决方法

我的错,没有人可以解决这个问题,我也应该包括javascript文件,我修改它通过编辑这些行在twitter typahead js文件：

var css = function() {
    "use strict";
    var css = {
        wrapper: {
            // HACK: make dropdown display in chrome properly
            //position: "relative",//display: "inline-block"
            position: "relative",verticalAlign: "top"

包装器没有坐在第一个输入,这似乎解决了它.