MVC 3 和 RTL - IE9 的问题答案

【问题标题】：MVC 3 and RTL - Issues with IE9MVC 3 和 RTL - IE9 的问题
【发布时间】：2012-02-15 19:54:13
【问题描述】：

我一直在使用一个非常简单的 ASP.Net MVC3 项目来试验字符串和 RTL 的本地化。我有一个看起来像这样的视图：

@model LocalizationExample.Models.HomeModel

@using Microsoft.License.Ux.Partner.LanguageResources.Order;
@{
    ViewBag.Title = "Index";
}

<h2>@OrderResource.PageTitle</h2>
<div dir="rtl">
        @Html.LabelFor(x => x.Field1) @Html.TextBoxFor(x => x.Field1)<br />
        @Html.LabelFor(x => x.Field2) @Html.TextBoxFor(x => x.Field2)<br />
        @Html.LabelFor(x => x.Field3) @Html.TextBoxFor(x => x.Field3)<br />
</div>

在 FireFox 10 和 Chrome 17 中，这会产生三行带有右侧标签的 TextBox - 全部在浏览器的右侧对齐。

在 IE9 中，前两个文本框的标签位于左侧，最后一个文本框的标签位于右侧 - 所有文本框都在浏览器的右侧对齐。

我尝试将“dir”移动到 body 标记和 html 标记，但我得到了相同的结果。我怎样才能让它在 IE9 中正确显示？

提前致谢！

【问题讨论】：

标签： asp.net-mvc-3 localization right-to-left

【解决方案1】：

如果您将它们嵌套在 div 中，它们似乎可以正确对齐：

<div dir="rtl">
    <div>
        @Html.LabelFor(x => x.Field1) @Html.TextBoxFor(x => x.Field1)
    </div>
    <div>
        @Html.LabelFor(x => x.Field2) @Html.TextBoxFor(x => x.Field2)
    </div>
    <div>
        @Html.LabelFor(x => x.Field3) @Html.TextBoxFor(x => x.Field3)
    </div>
</div>

【讨论】：