jquery - CSS继承宽度不起作用

Question

我目前正在尝试创建一个基于浏览器的日历，它允许工作或 session 等叠加在上面，将使用 AJAX(或类似的)动态检索并显示给最终用户。

不幸的是，要么我的 CSS(非常)生锈，要么这只是我难以理解的另一个怪事。

基本思想是有一个 <div>将为正确的 <td> 中的每个 session 或工作创建日历中的日期/时间。但是，我目前无法让这个 div 继承 <td> 的宽度。所以它不会与其他日子重叠。

我当前使用的 CSS 包含...

td {
    border-left: solid 1px gray;
    border-right: solid 1px gray;
    border-bottom: solid 1px lightgray;
    border-top: solid 1px lightgray;
    **width: 12.5%;**
    height: 10px;
    font-size: 0.1em;
}

div.job { 
       position: absolute; 
       background: #C83636; 
       background: rgba(200, 54, 54, 0.7); 
       font-size: 8px; 
       color: white; 
       margin-top: 3px; 
       width: inherit; 
       height: 10px; 
}

然后我将使用 jquery 创建这些 div:
$("#1-1").html("<div class='job'>Some test text</div>");

据我目前的理解，这应该意味着创建的<div>继承 <td> 的宽度它被封闭在电池中，因此可以很好地装入电池中。然而，当我测试 Opera 或 Firefox 时，这并没有发生。
What I see

有人知道为什么会这样吗？

Answer 1

改变 position:absolute 到 position:relative 为 div.job 类