Javascript 如何防止尾随内容与选项卡内容重叠？

我开发了一个只使用CSS来解析设计选项卡模式的网页。它的目标是没有任何问题，并工作；但它有几个我想修复的bug，而且似乎找不到解决的方法

如果该解决方案与IE7、8或9兼容就好了（因为我目前的模式只适用于Edge、Chrome和Firefox）

当我在包含DIV的下面有元素，并且里面的内容与之重叠时，就会出现问题。DIV容器似乎不会随着选项卡的更改而“调整大小”

下面是一个页面的示例：

.tabs{显示：块；列表样式：无；位置：相对；填充：0；边框底部：4px实心#475b7e；}
.tabs li{边距：0；显示：内联块；字体重量：粗体；光标：自动；边框：无；最大宽度：100px；垂直对齐：顶部；}
.tabs li.tab{显示：无；}
.tabs li i{font-weight:normal；}
.tabs li[for^=tab]{背景色：#bcc7d8；颜色：#314362；显示：块；位置：相对；填充：0 4px 0 4px；边距：0；线条高度：18px；}
.tabs li[for^=tab]：悬停{背景色：#ffffff；颜色：#475b7e；}
.tabs li.tab:checked+[for^=tab]{背景色：#314362；颜色：#ffffff；}
.tabs li.tab:checked+[for^=tab]：悬停{背景色：#475b7e；颜色：#ffffff；}
.tabs li.tab:checked~[class=tabcontainer]{显示：块；位置：绝对；左：0；宽度：100%；}
.tabs li.tabcontainer{显示：无；填充：6px 4px 20px 4px；字体重量：正常；}
下面是一个DIV，我想与UL列表一起成长；并且能够看到下一个P标记（DIV下方）上的文本；更重要的是，我希望能够在IE7上使用它，至少在IE9上



弗斯特
第一行的内容


第二
现在第二行内容
2行


第三
第三行内容，第二行为空


向前地
第四条的内容，（仅仅因为）又是一行


第五
第五行的内容是另一行，但更多的内容现在已经完成


我想看的文本

绝对定位带来了挑战，这就是为什么仅CSS选项卡和jQuery选项卡具有不同的标记结构。在应用jQuery的tabs组件之前，可以编写jQuery来修改标记：

// create a contents element below the list
$('.container').append('<div class="tabs-content"></div>');

// loop through each list item
$('ul.tabs li').each(function() {

    // move contents to div below list and give each an index-based ID
    $(this).find('.tabcontainer')
           .appendTo('.tabs-content')
           .attr('id', 'tab' + $(this).index());

    // strip markup from list items and build anchors targeting the appropriate ID
    $(this).html('<a href="#tab' + $(this).index() + '">' + $(this).text() + '</a>' );

});

// initialize jQuery-UI tabs
$('.container').tabs();

//在列表下面创建一个contents元素
$（'.container'）。追加（''）；
//循环浏览每个列表项
$（'ul.tabs li'）。每个（函数（）{
//将内容移动到列表下方的div，并为每个内容提供一个基于索引的ID
$（this.find（“.tabcontainer”）
.appendTo（“.tabs内容”）
.attr（'id'，'tab'+$（this.index（））；
//从列表项中剥离标记，并以适当的ID为目标构建锚定
$（this.html（“”）；
});
//初始化jQueryUI选项卡
$（'.container'）.tabs（）；

---

这可能对您有所帮助，这与我使用的结构几乎相同；即使CSS也几乎一样-很好-不过我会测试它，因为我不知道它在哪里不会与下一个元素重叠。似乎会产生结果。。。这会影响其他事情吗？我会先试试，但如果页面中有其他元素具有相同的类，我会非常喜欢。如果是这样的话，你必须更具体地使用选择器；我的意思是在回发时，当页面回调时，服务器识别元素，诸如此类；还有，“之前”和“之后”元素在IE7和IE9上起作用吗？我会先检查和测试-然后我会标记你的答案并很好地使用它。。。它“有效”，我将保留它作为一个解决方案，但我必须做一些更改，例如“.container”并不总是存在（在每一页上），结果是有点“未匹配”-选项卡标题的高度被创建得非常大-我正在基于此进行所有调整，所以谢谢@isherwood