javascript - 如何显示宽度为 :100% in Chrome 的表格

Question

我正在调试和扩展一个 Express 应用程序，该应用程序在页面上的一系列嵌套表格中显示数据集。最初，所有 CSS 都在 HTML 文件的 head 标签中的样式标签中，表格在页面 100% 的宽度上显示良好。当 CSS 在同一页面上时它起作用了，这是用于控制我们试图显示的元素的宽度的 CSS:

li.dir span {
    color: black;
    cursor: auto;
    -webkit-box-sizing: border-box ;
    -moz-box-sizing: border-box ;
    box-sizing: border-box ;
    width: 100%;
}

现在我已经去掉样式标签并将 CSS 移动到它自己的文件中，width:100% 样式不会显示。

我已经在 DevTools 中检查了有问题的元素，当我查看 li.dir span 类时，Chrome 和 IE 都删除了 width:100% 属性。

我知道宽度由父元素控制，所以我尝试将 style=width:100% 属性添加到每个父元素，以尝试强制使用这个特定的样式属性，但我似乎仍然找不到在哪里使这个特定的 CSS 属性起作用。

这是控制在我体内创建表的位置的父 div:

<div id="url"></div>
<div class="create"></div>

我发现的问题与应用动态插入 DOM 元素这一事实有关。不知何故，Chrome 将 style="display: inline-block 属性添加到作为我的表数据父级的 anchor 标记。问题是我找不到添加它的位置，因为当我更改唯一的位置时我的 HTML 文件将此属性设置为 width:100% 它仍然会出现。

我的猜测是 display:inline-block 是从 bootstrap 继承的，但这只是一个猜测。

这是我处理父元素插入的代码。如您所见，我正在尝试消除 display: inline-block 以获得 width:100%。我的代码中没有 display: inline-block，但默认情况下会以某种方式添加它。我该如何摆脱它？看看我的代码:

table += 
'<ul>' + 
    '<li class="dir" id="' + title + '">' + 

         // This is the anchor tag in question
        '<a id="' + title + 'focus" style="width: 100%;"></a>' + 
        title + 
        '<span>' + 
            '<ul>' + 
                '<li id=\"' + title + "Table" + '\"></li>' + 
            '</ul>' + 
        '</span>' + 
    '</li>' + 
'</ul>';
}
tabobj.push(title);

这是它在 DevTools 中的样子:

当它位于同一个 HTML 文件的样式标记中而不是单独的 CSS 文件中时，为什么它会在我的类中工作？

此外，我如何摆脱 display:inline-block Chrome 和 IE 似乎默认添加的设置？？？？

如果你能在这方面帮助我，请告诉我，谢谢!

这是 codePen 上元素的链接:https://codepen.io/lopezdp/pen/GEzwmP

Answer 1

所以我找到了它并开始尝试不同的解决方案并且我能够解决它。

感谢您帮助确定要采取的方向。以下 anchor 标记显示了我为解决此问题而对 HTML 所做的更改:

'<a id="' + title + 'focus" style="width: 100%; display: none; overflow: auto;"></a>'