html - 一种仅使用 CSS 将内联 block 元素的高度增加到其父容器的字体高度之外的方法，符合 IE9+

标签 html css

你好。

我在一个响应式网站上工作，我需要在每个页面上包含的 block 之一包含各种社交网络的图像链接。图片位于一个内联 block 容器中，该容器与另一个内联 block 元素位于同一行，因此直接更改它们的高度会使容器高于其兄弟元素，这并不是特别吸引人。我正在尝试找到一种方法将它们的大小从 16px(这是我的字体高度)增加到至少 32px，否则它们将难以辨认。我已经使用 transform 解决了这个问题，但我想知道是否有不同的方法。

非常感谢您。

代码片段:

@charset "utf-8";

* { box-sizing: border-box; }

a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
span { display: inline-block; }
textarea { resize: none; }

input[type="button"], input[type="submit"] { cursor: pointer; }

.cblock { padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.dtable { display: table; }
.dtcell { display: table-cell; }
.dtrow { display: table-row; }

#container { width: 100%; height: 100%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header > div { margin: 0 auto; }
#header > div .dtcell:last-child span:last-child a { padding: 0 10px; }
#header > div .dtcell:last-child span:last-child img { -ms-transform: scale(2, 2); -webkit-transform: scale(2, 2); transform: scale(2, 2); }
#logo { width: 100px; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#logo span { display: none; }
#menu span { width: 50%; }

@media (max-width: 768px) {

#header .dtcell { display: block; width: auto; }
#header > div { width: 100%; }
#logo { width: 100%; background: none; }
#logo span { display: inline-block; }
#logo span:first-child { padding: 18px; border: 2px solid transparent; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#logo span:last-child { float: right; cursor: pointer; }
#menu { clear: both; }
#menu div { display: none; }
#menu span:first-of-type { float: left; }

}

@media (max-width: 480px) {

#menu span { display: block; width: auto; }
#menu span:first-of-type { float: none; }

}
<div id="container" class="dtable">
	<div id="header" class="dtrow">
		<div class="dtable">
			<div class="dtrow">
				<div class="dtcell" id="logo">
					<span>&nbsp;</span><!--
					--><span class="cblock">&#9776;</span>
				</div>
				<div class="dtcell" id="menu">
					<div class="cblock">
						<a href="#">Link #0</a>
						<a href="#">Link #1</a>
						<a href="#">Link #2</a>
						<a href="#">Link #3</a>
						<a href="#">Link #4</a>
						<a href="#">Link #5</a>
						<a href="#">Link #6</a>
						<a href="#">Link #7</a>
					</div>
					<span class="cblock">Phone</span><!--
					--><span class="cblock">
						<a href="#" target="_blank"><img src="../images/icon0.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon1.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon2.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon3.gif" alt="" title=""></a>
					</span>
				</div>
			</div>
		</div>
	</div>
	<div id="content" class="dtrow">
		
	</div>
	<div id="footer" class="dtrow">
		<span class="cblock">&copy; The three musketeers, 2017. Say hello to the UFO.</span>
	</div>
</div>

(HTML 注释用于删除换行符，转换为内联元素和内联 block 元素之间的空格)

JSFiddle 上的代码副本:https://jsfiddle.net/uw35786p/2/

最佳答案

有 2 种方法*可以调整子级的大小而不影响其父级，使用您已经找到的 transform 和绝对定位，它可能看起来像这样

#header > div .dtcell:last-child span:last-child a {
  padding: 0 10px;
  position: relative;
  height: 14px;
  width: 50px;
}
#header > div .dtcell:last-child span:last-child img {
  top: -13px;
  left: 0;
  height: 44px;
  width: 44px;
  position: absolute;
}

Updated fiddle

堆栈片段

@charset "utf-8";

* { box-sizing: border-box; }

a { display: inline-block; text-decoration: none; }
a:hover { text-decoration: underline; }
body, html { font-family: Helvetica, Arial, sans-serif; font-size: 16px; height: 100%; margin: 0; padding: 0; background-color: #ffffff; }
img { border: 0; }
span { display: inline-block; }
textarea { resize: none; }

input[type="button"], input[type="submit"] { cursor: pointer; }

.cblock { padding: 18px; border: 2px solid transparent; -webkit-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -moz-box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); box-shadow: inset 0px 0px 2px 2px rgba(200, 200, 200, 0.5); -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; }
.dtable { display: table; }
.dtcell { display: table-cell; }
.dtrow { display: table-row; }

#container { width: 100%; height: 100%; }
#content { height: 100%; }
#footer { text-align: center; }
#footer span { width: 100%; }
#header > div { margin: 0 auto; }

#header > div .dtcell:last-child span:last-child a {
  padding: 0 10px;
  position: relative;
  height: 14px;
  width: 50px;
}
#header > div .dtcell:last-child span:last-child img {
  top: -13px;
  left: 0;
  height: 44px;
  width: 44px;
  position: absolute;
}

#logo { width: 100px; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#logo span { display: none; }
#menu span { width: 50%; }

@media (max-width: 768px) {

#header .dtcell { display: block; width: auto; }
#header > div { width: 100%; }
#logo { width: 100%; background: none; }
#logo span { display: inline-block; }
#logo span:first-child { padding: 18px; border: 2px solid transparent; background-image: url('../images/logo.gif'); background-size: contain; background-repeat: no-repeat; background-clip: padding-box; }
#logo span:last-child { float: right; cursor: pointer; }
#menu { clear: both; }
#menu div { display: none; }
#menu span:first-of-type { float: left; }

}

@media (max-width: 480px) {

#menu span { display: block; width: auto; }
#menu span:first-of-type { float: none; }

}
<div id="container" class="dtable">
	<div id="header" class="dtrow">
		<div class="dtable">
			<div class="dtrow">
				<div class="dtcell" id="logo">
					<span>&nbsp;</span><!--
					--><span class="cblock">&#9776;</span>
				</div>
				<div class="dtcell" id="menu">
					<div class="cblock">
						<a href="#">Link #0</a>
						<a href="#">Link #1</a>
						<a href="#">Link #2</a>
						<a href="#">Link #3</a>
						<a href="#">Link #4</a>
						<a href="#">Link #5</a>
						<a href="#">Link #6</a>
						<a href="#">Link #7</a>
					</div>
					<span class="cblock">Phone</span><!--
					--><span class="cblock">
						<a href="#" target="_blank"><img src="../images/icon0.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon1.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon2.gif" alt="" title=""></a><!--
						--><a href="#" target="_blank"><img src="../images/icon3.gif" alt="" title=""></a>
					</span>
				</div>
			</div>
		</div>
	</div>
	<div id="content" class="dtrow">
		
	</div>
	<div id="footer" class="dtrow">
		<span class="cblock">&copy; The three musketeers, 2017. Say hello to the UFO.</span>
	</div>
</div>

* 好吧，当然可以在父级上设置一个固定的高度，让子级溢出和/或相对定位。

关于html - 一种仅使用 CSS 将内联 block 元素的高度增加到其父容器的字体高度之外的方法，符合 IE9+，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44257281/

上一篇：javascript - 使用 Bootstrap 显示模态的问题

下一篇：javascript - 如何限制粒子仅从一个对象/位置/文件释放，而不是单击屏幕上的任意位置？

相关文章：

css - 过渡在 Firefox 或 Opera 中不起作用，仅在 Chrome 中起作用

iphone - CSS 标准浏览器与 iPhone 或移动设备 : two box models? 技巧示例

html - float 不正确清除导致元素隐藏在它们后面

php - 由于某种原因，我的链接栏上的背景图片没有显示

javascript - 如何使用jquery更改单个div元素的多个背景的尺寸

CSS3 悬停效果不适用于移动浏览器

html - ul 不返回垂直

html - 结合菜单和下拉菜单的背景

HTML iframe - 禁用滚动

javascript - 未捕获的类型错误 : Cannot set property 'className' of null Error

©2024 IT工具网  联系我们