html - 日语unicode字符使CSS float 向左反转

请在IE中查看以下js小提琴（我正在使用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应向左浮动，但应向右浮动。但是，如果我在第五个单选按钮中删除了最后一个日语字符，它现在会正确地向左浮动。这仅在IE中发生。谁能提供解决方法？

最佳答案

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

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

li { font-family: MS PGothic; }

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

关于html - 日语unicode字符使CSS float 向左反转，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/23223650/