html - 日文 unicode 字符正在反转 CSS 向左浮动

Question

请在 IE 中检查以下 js fiddle(我使用的是 10)

http://jsfiddle.net/bF65u/1/

.inlineCol2 {
width: 50%;
    }
    .option {
        float: left;
}


<div id="Div_a799f1fc-ccbb-4c85-b367-a20300fe5a64" class="Div_ " >
    <div class="errorMsg"></div>
    <div class="surveyElementContent" title="">
        Why does this '箱' japanese character mess up my floats?
    </div>

    <div class="surveyElementOptions">
         <div class="surveyElementOption option inlineCol2 ">
            <input type="radio" value="1" /> 
            <label>1</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="2" /> 
            <label>2</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="3" /> 
            <label>3</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="4" /> 
            <label>4</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="5" /> 
            <label>ゴミ箱</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="6" /> 
            <label>6</label>
        </div>
         <div class="surveyElementOption option inlineCol2">
            <input type="radio" value="7" /> 
            <label>7</label>
        </div>
    </div>
   </div> 

单选按钮 div 应该向左浮动，但它们却向右浮动。但是，如果我删除第 5 个单选按钮中的最后一个日文字符，它现在会正确地向左浮动。这只发生在 IE 中。任何人都可以提供解决方法吗？

Answer 1

这里发生的不是右对齐，而是左对齐的干扰:如果您在末尾添加更多 li 元素，它们将被正确设置。

我无法分析问题的最终原因，但它似乎与字体有关，这可能是因为 IE 从通常用于文本的字体以外的字体中提取日语字符。这意味着可以通过将字体设置为包含所需日文字符的字体来解决问题，例如

li { font-family: MS PGothic; }

在实践中，您需要研究 Windows 上哪些常用字体包含日语字符，并编写一个合适的列表，而不是一个单一的字体系列名称，以涵盖不同的设置。