css 表与引导程序不一致

【问题标题】：css tables out of alignment with bootstrapcss 表与引导程序不一致
【发布时间】：2019-08-16 21:36:16
【问题描述】：

我已经在 Photoshop 中切片了一堆图像，并使用 css 表格标记导出了切片。 css 工作正常，将每个切片放置在正确的位置，也就是说，直到将引导 css 文件添加到页面。这会导致一些图像在桌面浏览器上不对齐，但在移动设备上却没有。

这是一个看起来不错的表格示例，直到将 bootstrap.css 放在文档的头部。在本例中，只有 1 张图像，即图像 #3 未对齐（bootstrap 3 向下 4 个像素，bootstrap 4 向下 6 个像素）。

没有引导

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>

使用 Bottstrap

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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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 的人。但我有我的理由。提前致谢。

【问题讨论】：

  • 请创建一个适当的minimal reproducible example 以充分显示问题。
  • 我不太确定该怎么做。您希望我将图像源链接到服务器上托管的图像源吗？
  • 也许您可以使用来自placeholder.com 等服务的适当大小的图像重新创建问题，但我认为我们需要以某种方式看到这一点，因为您会看到导致此问题的任何原因并不能真正解释只影响一个特定的图像，只给出代码 sn-ps。
  • BS 默认将vertical-align: middle; 应用于图像，这可能会导致问题 - 默认值为baseline，尝试将其应用于图像，看看它是否会改变。
  • @我添加了占位符图像，并展示了一个没有 Bootstrap 的工作示例和一个使用 Bootstrap 的不工作示例

标签： css twitter-bootstrap-3 bootstrap-4


【解决方案1】：

Bootstrap 更改了body 元素的line-height 和font-size，这是继承的。这在小图像上是有问题的，因为图像所属的一条线将高于图像。

在图像容器divs 上将line-height 设置为零可以解决您的问题

div.Table_01,
div.Table_02,
div.Table_03,
div.Table_04,
div.Table_05,
div.Table_06,
div.Table_07,
div.Table_08,
div.Table_09,
div.Table_10,
div.Table_11,
div.Table_12,
div.Table_13,
div.Table_14 {
  line-height: 0;
}

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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<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>

【讨论】：

  • 云禅绝对精彩。这个解决方案奏效了，并且解决了一些让我很长一段时间都无法摆脱头发的问题。谢谢。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2014-03-14
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode