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 Forms, поэтому они не совсем соответствуют CSS. Но в Chrome и Firefox все работает по большей части, но вам, возможно, придется настроить поля и размер специально для элемента select.

И если вы хотите поддерживать Mac, вам действительно нужно забыть о размере, потому что Apple OS решает делать свое дело независимо от настроек, вроде той же проблемы, которую я упоминал выше с IE.

Не становитесь чрезмерно анальным по этому поводу, потому что в данный момент истории вы не можете контролировать каждый аспект ввода одинаково, и вы собираетесь свести себя с ума, если попытаетесь. С браузерами, в частности IE 9, дела идут лучше, но не отрывайтесь от мысли, что они будут работать так, как вы хотите.

Примечание Я также предположил, что он находится под контролем, но leftRightBorder нигде не отображается в коде, который вы разместили. Я предполагаю, что проблема, о которой вы пишете, не так проста, как забывание класса.