Я нарезал кучу изображений в Photoshop и экспортировал их с разметкой таблицы css. CSS работает нормально, помещая каждый срез в правильное положение, то есть до тех пор, пока файл начальной загрузки css не будет добавлен на страницу. Это приводит к тому, что некоторые изображения теряют выравнивание в браузере настольного компьютера, но не на мобильном устройстве.
Вот пример таблицы, которая выглядит хорошо, пока bootstrap.css не будет помещен в заголовок документа. В данном случае это просто 1 изображение, изображение № 3 не выровнено (4 пикселя вниз при загрузке 3 и 6 пикселов при загрузке 4).
Без начальной загрузки
div.Table_01 {
position:absolute;
left:0px;
top:0px;
width:272px;
height:340px;
}
div.jyd-01 {
position:absolute;
left:0px;
top:0px;
width:272px;
height:68px;
}
div.jyd-02 {
position:absolute;
left:0px;
top:68px;
width:67px;
height:71px;
}
div.jyd-03 {
position:absolute;
left:67px;
top:68px;
width:57px;
height:15px;
}
div.jyd-04 {
position:absolute;
left:124px;
top:68px;
width:148px;
height:71px;
}
div.jyd-05 {
position:absolute;
left:67px;
top:83px;
width:57px;
height:56px;
}
div.jyd-06 {
position:absolute;
left:0px;
top:139px;
width:42px;
height:201px;
}
div.jyd-07 {
position:absolute;
left:42px;
top:139px;
width:28px;
height:24px;
}
div.jyd-08 {
position:absolute;
left:70px;
top:139px;
width:51px;
height:201px;
}
div.jyd-09 {
position:absolute;
left:121px;
top:139px;
width:27px;
height:23px;
}
div.jyd-10 {
position:absolute;
left:148px;
top:139px;
width:124px;
height:115px;
}
div.jyd-11 {
position:absolute;
left:121px;
top:162px;
width:27px;
height:178px;
}
div.jyd-12 {
position:absolute;
left:42px;
top:163px;
width:28px;
height:177px;
}
div.jyd-13 {
position:absolute;
left:148px;
top:254px;
width:24px;
height:86px;
}
div.jyd-14 {
position:absolute;
left:172px;
top:254px;
width:100px;
height:86px;
}
body {
background: yellow;
}
<div class="Table_01">
<div class="jyd-01">
<img src="https://picsum.photos/272/68?image=990" width="272" height="68" alt="">
</div>
<div class="jyd-02">
<img src="https://picsum.photos/67/71?image=990" width="67" height="71" alt="">
</div>
<div class="jyd-03">
<img src="https://picsum.photos/15/57?image=990" width="57" height="15" alt="">
</div>
<div class="jyd-04">
<img src="https://picsum.photos/148/71?image=990" width="148" height="71" alt="">
</div>
<div class="jyd-05">
<img src="https://picsum.photos/57/56?image=990" width="57" height="56" alt="">
</div>
<div class="jyd-06">
<img src="https://picsum.photos/42/201?image=990" width="42" height="201" alt="">
</div>
<div class="jyd-07">
<img src="https://picsum.photos/28/28?image=990" width="28" height="24" alt="">
</div>
<div class="jyd-08">
<img src="https://picsum.photos/51/201?image=990" width="51" height="201" alt="">
</div>
<div class="jyd-09">
<img src="https://picsum.photos/27/23?image=990" width="27" height="23" alt="">
</div>
<div class="jyd-10">
<img src="https://picsum.photos/124/115?image=990" width="124" height="115" alt="">
</div>
<div class="jyd-11">
<img src="https://picsum.photos/27/178?image=990" width="27" height="178" alt="">
</div>
<div class="jyd-12">
<img src="https://picsum.photos/28/177?image=990" width="28" height="177" alt="">
</div>
<div class="jyd-13">
<img src="https://picsum.photos/24/86?image=990" width="24" height="86" alt="">
</div>
<div class="jyd-14">
<img src="https://picsum.photos/100/86?image=990" width="100" height="86" alt="">
</div>
</div>
С Боттстрапом
Я могу исправить необъяснимое смещение, изменив css на top: 64px, за исключением того, что оно затем будет смещено на мобильном устройстве.
Подобное происходит на каждой экспортированной мной таблице. Кажется, я ничего не могу найти по этому вопросу. Я думаю, что я, должно быть, единственный человек, все еще использующий нарезанные таблицы Photoshop и пытающийся сделать это с помощью Bootstrap. Но у меня есть свои причины. Заранее спасибо.