Kindle电子书CSS适配：替换::before与calc()方案咨询

我的时间线CSS在多数电子阅读器中可正常运行，但在Kindle设备上失效，核心原因是Kindle不支持::before伪元素与calc()函数。以下是不使用JavaScript、保留原视觉效果的修改方案：

修改思路 #

1. 用真实DOM元素替代::before伪元素，适配Kindle不支持伪元素的限制
2. 移除calc()函数，通过调整元素定位逻辑实现原竖线高度效果
3. 保留所有分页避免属性，确保跨页显示正常

修改后的HTML代码 #

<section class="timeline">
    <div class="timeline-year" aria-hidden="true">
        1840
        <div class="timeline-year-line"></div>
    </div>
    <div class="timeline-group">
        <div class="timeline-event">
            <div class="timeline-event-line"></div>
            <div class="timeline-content">
                <div class="timeline-date">
                    <time datetime="1840-03-01">01 March 1840</time>
                </div>
                <h3>Birth of Some Guy</h3>
                <p>3rd son born to a family in Ohio.</p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->
    </div> <!-- End 1840 timeline-group -->

    <div class="timeline-year" aria-hidden="true">
        1858
        <div class="timeline-year-line"></div>
    </div>
    <div class="timeline-group">
        <div class="timeline-event">
            <div class="timeline-event-line"></div>
            <div class="timeline-content">
                <div class="timeline-date">
                    <time datetime="1858-01-01">1858</time>
                </div>
                <h3>Uncle Moves to Iowa</h3>
                <p>Uncle moves to Iowa and settles in Linn County, Iowa. </p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->

        <div class="timeline-event">
            <div class="timeline-event-line"></div>
            <div class="timeline-content">
                <div class="timeline-date">
                    <time datetime="1858-01-01">1858</time>
                </div>
                <h3>Uncle Becomes Mayor</h3>
                <p>Uncle becomes Mayor in some city.</p>
            </div> <!--End timeline-content -->
        </div> <!--End timeline-event -->
    </div> <!-- End 1858 timeline-group -->

    <div class="timeline-year" aria-hidden="true">END</div>
</section> <!-- End timeline section-->

修改后的CSS代码 #

.timeline {
    position: relative;
    padding: 0;
    margin: 0;
    display: block; /* 替换flex布局，改用块级布局兼容Kindle */
}

.timeline-group {
    position: relative;
    margin-bottom: 2em;
    padding-left: 2em;
    page-break-inside: avoid;
    break-inside: avoid;
}

/* 替代原timeline-event::before的真实元素 */
.timeline-event-line {
    height: 2px;
    width: 1.5em;
    background-color: orange;
    position: absolute;
    left: -2em;
    top: 30%;
    break-inside: avoid;
    page-break-inside: avoid;
}
 
.timeline-event {
    position: relative;
    margin: 1em 0;
    padding-left: 2em;
    break-inside: avoid;
    page-break-inside: avoid;
}

.timeline-content {
    padding: 1em;
    margin: 0 1em 0 -2.5em;
    background-color: #EFEFEF;
    border-left: 5px solid #425695;
    border-radius: 0.5em;
    break-inside: avoid;
    page-break-inside: avoid;
}

.timeline-event h3 {
    margin: 0 0 0.5em 0;
    font-size: 1.2em;
}

.timeline-event p {
    margin: 0;
}

/* 替代原timeline-year::before的真实元素 */
.timeline-year-line {
    position: absolute;
    top: 100%; /* 从年份底部开始延伸 */
    left: 1.25em; /* 对齐年份中心位置 */
    width: 2px;
    background-color: #ff0000;
    bottom: -1em; /* 延伸到下一个年份前的间距 */
}

.timeline-year {
    display: inline-block;
    width: 2.5em;
    padding: .25rem .75rem;
    background-color: #425695;
    font-size: 1.5em;
    color: #ffffff;
    margin-bottom: 1em;
    position: relative; /* 为内部竖线提供定位基准 */
}

.timeline-date {
    display: inline-block;
    width: auto;
    padding: .25rem 1.25rem .25rem;
    margin-bottom: .5em;
    background-color: #ffffff;
    font-weight: 700;
    font-size: .75rem;
    text-transform: uppercase;
    color: currentColor;
}

body.timeline02 {
    font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
    font-size: .75rem;
    color: #222;
    line-height: 1.75;
    background-color: #ffffff;
    margin: 0;
}

关键修改说明 #

• 伪元素替换：给.timeline-year和.timeline-event添加真实子元素，替代原伪元素的线条效果，确保Kindle能正确渲染
• 移除calc()：将年份竖线的定位改为从年份底部延伸到组的底部间距，不需要计算高度即可实现原效果
• 布局兼容：将.timeline的flex布局改为块级布局，避免Kindle对flex的兼容性问题
• 分页保留：所有page-break-inside:avoid和break-inside:avoid属性均保留，确保时间线内容不会跨页断裂

内容的提问来源于stack exchange，提问作者zi94sm65