jquery - AJAX/CSS - 在 ajax 调用填充后，最初在选择框上出现 css 问题

Question

我有一个 ajax 调用，它用选项填充一个选择框。唯一的问题是在 ajax 调用完成后首次单击该框时，样式被弄乱了。它要么全黑，要么在屏幕上上升几英寸。再次单击选择框后，您可以看到所有选项都很好，格式也应该是这样的。这个问题也只发生在 chrome 中...firefox 和 IE 不会发生这个问题。

select {
  border: 1px solid #333;
  width: 130px;
  height: 25px;
  border-radius: 3px;
  overflow: hidden;
  background-color: #333;
  color: #fff;
  font-weight: 700;
  vertical-align: middle;
}

select:hover {
  -webkit-transition: all .5s;
  transition: all .5s;
  background-color: #444;
}

这是我的 JSFIDDLE 的链接这可以展示我在做什么的一个例子。显然这不是一个有效的例子，因为 ajax 调用执行了一个查询。任何帮助将不胜感激。

Answer 1

您的示例中的 CSS/HTML 看起来不错。如果样式在 ajax 调用后出现困惑，您可能需要检查成功时收到的数据。尝试做:

success: function(success) {
    console.log(success.d);
}

查看是否有任何无效或不可见的字符弄乱了您的 HTML。祝你好运!