概括
我最近一直在为我的网站开发一个消息系统,该系统由Twitter Typeahead插件和bootstrap-tagsinput插件组成。但是,当我在Internet Explorer和Google Chrome中加载页面时,cs的样式出现问题,而在firefox中却可以正常工作(可能是因为我将其用于开发和初始样式编辑)。我想知道如何解决此问题,因为我对CSS不太了解,因此我试图在眼睛上尽量简化此问题。
请阅读以下有关我的问题的信息。
在Firefox中工作(开发)
以下是我的输入框在firefox中正常工作的图像:
Internet Explorer样式问题(编辑:已修复!)
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/