我使用SVG徽标作为背景图像,我似乎无法在Internet Explorer中正确对齐左侧(编辑:和Safari).
容器看起来像这样:
<div id="header">
<div id="logo"></div>
</div>
随风格:
#header{
width: 100%;
max-width: 1200px;
height: 100%;}
#logo{
background: url(../images/ss_logo.svg);
background-position: left center;
width: 100%;
height: 100%;
float: left;}
您可以看到它<div>应该跨越其父级的100%,但在元素的左侧显示徽标.这在Chrome和Safari中运行良好,但徽标总是<div id="logo">在IE中居中.
信息似乎很难找到,有其他人有同样的问题吗？
这是一个问题示例版本的链接,绿色框是SVG.
玩position: sticky了一段时间后，我开始为粘性导航实现它，并遇到了这个有趣但令人沮丧的滚动弹跳问题。
这是许多网站上常见的导航行为类型，您通常会使用 javascript 来计算页面中相对元素的偏移量。当元素到达窗口顶部时，将添加一个“卡住”类，使用 将元素从文档流中取出position: fixed，并在其位置添加一个相同高度的虚拟元素以防止页面“跳转” '。此外，通常会看到 javascript 然后缩小该导航的高度以在滚动时节省空间。
position: sticky除了（据我所知）检测元素何时“卡住”之外，CSS 现在似乎处理了所有这些。相反，我使用了一些 javascript 来进行卡住检测，发现一切都很好，直到粘性元素的高度需要改变。
这很难解释，但它对生产造成了严重破坏 - 所以这是我制作的一个精简示例，以尽可能简单地说明这个问题。
当页面的高度正好是合适的长度时，最好的说明是，所以我在元素上设置了一个固定的高度，以确保每个人都能看到相同的东西。您可以添加更多内容，但滚动过去时仍然存在问题。
结果是一些非常奇怪的行为。向下滚动时，导航会粘住，并且当它缩小导航栏时，浏览器自动创建的“虚拟元素”position: sticky似乎与其保持同步。这意味着，当添加卡住类时，整个页面变小，几分之一秒后，导航不再卡住，从而导致故障振动循环。
我测试过的每个浏览器的行为也完全不同。在 chrome 中，这种弹跳永远无法解决，它停留在无限循环中，不断添加/删除卡住的类。更有趣的是，在 Safari 中，滚动位置被“推回”到不会出错的状态。然后在 Firefox 中，它会同时执行这两种操作，在强制滚动位置再次返回之前，会出现一两秒钟的故障。
我想知道是否有人遇到过这种情况，并提出了任何解决方案？我想出的任何 js 解决方法都没有真正起作用或非常好！当然，随着人气的增长，更多的人会去打这个……
欢迎天才的解决方法、技巧、见解或完美的解决方案！
我试图在插画家中创建一个svg并将其用作背景图像填充到页面的顶部和底部,但仍然在950px宽的div内,并且我没有遇到麻烦.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="950px" height="522.785px" viewBox="0 0 950 522.785" enable-background="new 0 0 950 522.785" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M-1.076-16.544v560h45.512C31.152,180.379-1.076-16.544-1.076-16.544z"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M951,543.456v-560h-45.512C936.375,205.063,951,543.456,951,543.456z"/>
</svg>
这是我的svg,你可以看到插画家给它宽度和高度元素.我删除了这些,所以我可以在css中设置它们:
#middle{
width: 950px;
margin: 0px;
height: 100%;
float: left;
display: block;
background: url(../images/l.svg) no-repeat left top #00aeef;
}
我尝试了各种不同的组合,从svg中删除大小并在css中添加样式,例如:
background-size: cover;
background-size: 950px cover;
background-size: …