添加css类后，选择选项文本会部分消失

Question

＆＃13;

＆＃13;

$("button").on("click", function() {
	$("select option").each(function() {
  	$(this).addClass("heavyError");
  });
  $("select option:selected").attr("selected", false);
});

＆＃13;

.heavyError {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>

＆＃13;

＆＃13;

＆＃13;

如果在IE中运行此文件，文本会被连字符切断，但是，它在Chrome中正常运行。不确定这里发生了什么。它是IE或某种类型的错误吗？

Answer 1

将' '添加到select将强制选择＆＃34;刷新＆＃34;并修复IE11中的问题。见这里：https://jsfiddle.net/9kvcqc05/

＆＃13;

＆＃13;

$("button").on("click", function() {
	$("select option").each(function() {
  	$(this).addClass("heavyError");
  });
 
  $("select option:selected").attr("selected", false);
  $("select").append(' ');
});

＆＃13;

.heavyError {
  color: red;
  font-weight: bold;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
<option value="test-ss">test-ss</option>
</select>
<button>test</button>

＆＃13;

＆＃13;

＆＃13;

这似乎只是一个奇怪的IE特定错误。

我通过引用Jordan Gray的this great answer来解决这个问题。

Answer 2

我能想到的最好的是IE试图在连字符上包装选项的文本，因为粗体样式增加了它的宽度。

以下是较长文字的示例：

$("button").on("click", function() {
  $("select option").each(function() {
    $(this).addClass("heavyError");
  });
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
  <option value="test-ss">test-loremipsum</option>
</select>
<button>test</button>

快速解决方法是向元素添加空格：

$("button").on("click", function() {
  $("select option").each(function() {
    $(this).text($(this).text() + ' ');
    $(this).addClass("heavyError");
  });
});

.heavyError {
  color: red;
  font-weight: bold;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<select style="width:480px; height:100px;" multiple>
  <option value="test-ss">test-loremipsum</option>
</select>
<button>test</button>