CSS 不适用于每个元素

Question

这是我的 CSS：

<style type="text/css">
    .leftRightBorder select, 
    .leftRightBorder textarea, 
    .leftRightBorder input[type=text] 
    {
        width: 150px;
        margin-bottom: 5px;
    }
</style>

这是我的页面顶部的图像：

CSS 样式/空格/长度（就是这个词）页面上的所有内容都很漂亮，但是这个顶部部分仍然很奇怪，到期日有两个下拉菜单，起息日也有点奇怪。以下是该顶部部分的 ASP：

<tr id="tr14">
    <td id="td15">
        <%= Html.LabelFor(m => m.MaturityDate) %>
    </td>
    <td id="td16" style="width: 150px;">
        <%= Html.TextBox("MaturityDate", Model.MaturityDate.HasValue ? 
              Model.MaturityDate.Value.ToString("dd-MMM-yyyy") : "", 
              new { @class = "economicTextBox", propertyName = "MaturityDate", 
              onchange = "parseAndSetDt(this); ", dataType = "Date" })%>
        <%= Html.DropDownListFor(m => 
              m.AmortizationComponent.MaturityBusinessDayConvention,
              DropDownData.BusinessDayConventionList(), "", 
              new { propertyName = 
                  "AmortizationComponent.MaturityBusinessDayConvention", 
              onchange = "UpdateField(this);" })%>
    </td>
    <td id="td17" style="width: 76px">
        Value Date
    </td>
    <td id="td18" style="width: 150px">
        <%= Html.TextBoxWithPermission("RateTimeStamp", 
              Model.RateTimeStamp.HasValue ? 
              Model.RateTimeStamp.Value.ToString("dd-MMM-yyyy") : "", 
              new string[] { PERMISSIONS.hasICAdvanced }, 
              new { @class = "economicTextBox", propertyName = "RateTimeStamp", 
              onchange = "parseAndSetDt(this);", dataType = "Date" })%>
        <br />
        <%= Html.CheckBoxForWithPermission(m => m.Current, 
              new string[] { PERMISSIONS.hasICAdvanced }, 
              new { @class = "economicTextBox", propertyName = "Current", 
              onchange = "UseCurrent();UpdateField(this);" })%>
        Current
    </td>
</tr>

为什么这部分没有有效地设计样式？

Answer 1

CSS 在每个浏览器中对每个输入元素的工作方式并不相同。在 IE 中，大多数输入仍然由 Windows 窗体绘制，因此它们并不完全是 CSS 的补充。但在 Chrome 和 Firefox 中，大多数情况下一切正常，但您可能必须专门针对 select 元素调整边距和大小。

如果你想支持 Mac，你真的需要忘记大小，因为 Apple 操作系统决定做它自己的事情，而不管设置如何，这有点像我上面提到的 IE 的问题。

不要对此变得过于肛门，因为在历史的这一点上，你无法以相同的方式控制输入的各个方面，如果你尝试这样做，你会把自己逼疯的。浏览器（特别是 IE 9）的情况正在变得更好，但不要屏息以待它们会按照您想要的方式工作。

注意我也假设它受到监督，但 leftRightBorder 没有出现在您发布的代码中的任何位置。我假设您发布的问题并不像忘记上课那么简单。