我有一些渲染的HTML(见下文)。我希望第一个跨度元素的宽度为300像素。

<div style="display:inline-block">
  <div id="songFields">
    <div>
      <label for="Description">Title</label>
      <span class="k-input k-textbox selectText k-input-solid k-input-md k-rounded-md" style="">
        <input class="selectText k-input-inner" id="Description" name="Description" value="Shy Boy" data-role="textbox" aria-disabled="false" autocomplete="off" style="width: 100%;">
      </span>
      <script>
        kendo.syncReady(function() {
          jQuery("#Description").kendoTextBox({
            "value": "Shy Boy"
          });
        });
      </script>
      <span class="field-validation-valid" id="Description_validationMessage" style="padding-left:20px"></span>
    </div>
    <!-- Continued -->
  </div>
</div>
    </div>

我创建了一个非常特殊的样式规则，将宽度设置为300像素。

#songFields > div > span.k-input.k-textbox {
    width: 300px;
}

在不同的css文件中碰巧有另一个通用规则:

.k-input,.k-picker {
    margin: 0;
    padding: 0;
    width: 100%;

Chrome认为我的样式规则适用于该元素，但由于不太明确的样式规则，决定将宽度设为100%!(见Chrome开发工具中的图片)

如果我进入kendo.common-bootstrap.css并注释掉width:100%规则，那么我的规则适用。但是我的规则仍然适用，因为我的选择器# songFields & gtdiv & gtk-textbox比。k-输入，。k-picker。为什么Chrome要应用不太明确的选择器的规则？

我在Firefox中测试过，Firefox如我所料使用了我的规则。这是Chrome bug吗？

# # #这个问题是由于我忘记在这个问题中加入一个CSS规则。 元素的显示设置为表格、表格行和表格单元格。 在这种情况下，最宽的元素将设置所有其他元素。

这是我所经历的一个简单的例子。

<div style="display:table">
  <div style="display:table-row">

    <span style="border:1px solid black;width:200px;display:table-cell">
        This has a width set to 200px
    </span>
  </div>
   <div style="display:table-row">
    <span style="border:1px solid black;width:400px;display:table-cell">
            This has a width set to 400px
    </span>
  </div>
</div>