我有一些渲染的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>