1

我正在尝试获取背景 .jpeg 图形以自动缩放到 DIV（lineholder）的高度，而不考虑子 DIV（链接持有人）的数量 - 同时让一些文本在父 DIV 内垂直对齐。

该代码在 Chrome 和 Firefox 中 100% 工作 - 但 IE11 完全忽略了背景大小。

我的 HTML 标记如下所示：

<div id="active-container" class="ac1">
<div id="lineholder" style= "background-image: url(....); background-repeat: no-repeat; background-size: 44px 100%;">

<div id="text">
TEST
</div>

<div id="linkholder">
</div>

<div id="linkholder">
</div>

</div>
</div>

CSS：

#active-container {
min-width : 240px;
min-height : 26px;
height : auto;
float : left;
}

#lineholder {
position : relative;
min-width : 240px;
height : auto;
overflow : hidden;
}

#text {
position : absolute;
top : 50%;
margin : -13px 0 0 0;
width : 45px;
height : 26px;
left : 0px;
font-size : 8px;
font-weight : bold;
line-height : 26px;
}

#linkholder {
margin-left : 45px;
min-height : 26px;
width : 190px;
position : relative;
}

IE11 仅在我的 lineholder 左上角显示原始背景图像 - 而所有其他浏览器都会扩展高度以适应 DIV。

在此处查看图片http://6710.sunnysite.dk/background-size_debug.jpg

background-image css 位于 html 内部，因为现在完全了解 HTML CSS 的人需要插入更多具有不同背景图像的单独线夹；）所以不同的类等不是一种选择。

4

3 回答 3

1

问题不在于 CSS 或 IE 呈现它的方式（也不是直接的）。

该代码位于网络共享上。巧合的是，我将它复制到了我的桌面上并且它工作了。

该问题在此线程中进行了描述和回答 -当站点位于 networkdrive 时，IE 无法正确呈现 CSS

于 2014-09-25T19:43:24.653 回答
0

我有一种感觉，这是因为将像素与百分比混合在一起。

background-size: 44px 100%;

我知道 Safari 很难解决这个问题（尽管他们最近已经修复了很多这些问题）。在这方面只能假设 IE 存在相同或相似的问题。

如果您需要确保背景图像 44px 高和 100% 宽，您需要围绕它制作一个 Wrapper 并将该 wrapper 高度设置为 44px。然后使用标准的背景尺寸。（包含、覆盖、100% 等。）

于 2014-09-25T07:47:16.477 回答
0
  • 我通过伪元素使用 svg 图标作为背景图像。
    • background-size: contain;我在 IE-11 中遇到了问题。
    • 背景图像的宽度和高度在 CSS 中设置。

我将其替换为background-size: 97% 97%; 现在一切正常。

例子：

&:before {
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 97% 97%;
  background-image: url(../img/icons/add-to-package.svg);
  content: "";
  height: 2.143rem;
  left: 1.429rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.143rem;
}

再见。

于 2018-05-12T12:29:48.377 回答