概括

我最近一直在为我的网站开发一个消息系统,该系统由Twitter Typeahead插件和bootstrap-tagsinput插件组成。但是,当我在Internet Explorer和Google Chrome中加载页面时,cs的样式出现问题,而在firefox中却可以正常工作(可能是因为我将其用于开发和初始样式编辑)。我想知道如何解决此问题,因为我对CSS不太了解,因此我试图在眼睛上尽量简化此问题。

请阅读以下有关我的问题的信息。

在Firefox中工作(开发)

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



Internet Explorer样式问题(编辑:已修复!)

  • 输入框直到我添加标签才与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>
    

    提前输入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, 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;
    }
    .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;
    }
    

    引导标签输入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, 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, 255, 0.15), 0 1px 2px rgba(0, 0, 0, 0.15);
    }
    .bootstrap-tagsinput .tag [data-role="remove"]:hover:active {
      box-shadow: inset 0 3px 5px rgba(0, 0, 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"
    

    包装程序在第一个输入中的位置不正确,这似乎可以解决该问题。

    关于jquery - Twitter Typeahead和bootstrap-tagsinput样式在IE和Chrome中不正确,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/29930526/

    10-12 12:46
    查看更多