简体   繁体   English

在ie11中隐藏滚动条和SVG高度问题

[英]Hide scrollbar and svg height issue in ie11

I have svg logos in the footer of my web page and they are working fine in firefox and chrome but ie11 is displaying the max height of the svg's without respecting the aspect ratio for the witdh I gave the svg's in css. 我在网页的页脚中有svg徽标,并且它们在Firefox和chrome中都可以正常工作,但是ie11正在显示svg的最大高度,而没有考虑我在css中给svg设置的witdh的纵横比。

<div id="footer">                   
    <div id="logos">
        <div id="intel">
            <img src="images/logos/intel.svg" max-width="">
        </div>
...

#intel {
    width: 110px;
    margin: 25px 0 0 100px;
}

The position for the div's is absolute. div的位置是绝对的。 I don't know if it's the right way to position the svg's in the footer. 我不知道将svg放置在页脚中是否正确。 The only problem I had was trying to use a scroll plugin; 我唯一的问题是尝试使用滚动插件。 Varon: I just included it in the header, added the css and called it from html, setting paramns, etc. It worked weird, the only thing displaying as scrollbar was the trackbar (or a full height scrollbar) and it was moving as the scrollbar and disapearing when reached the bottom... It created conflict with the footer svg's, when scrolling down there were nothing (empty footer) but if I resized the window the svg's just appeared and if I scrolled up they acted like position fixed, moving upside... Varon:我只是将其包括在标题中,添加了css并从html中调用了它,设置了paramns等。它工作很奇怪,唯一显示为滚动条的是跟踪栏(或全高滚动条),并且随着滚动条到达底部时消失了……它与页脚svg产生了冲突,向下滚动时没有任何内容(空页脚),但是如果我调整窗口的大小,则svg只会出现,如果我向上滚动,它们就像固定的位置一样移动向上...

I'd like to know a good way to customize the scrollbar, cross browsers if possible, so it doesn't hide part of the design (the right side). 我想知道一种自定义滚动条的好方法,如果可能的话,可以跨浏览器,因此它不会隐藏设计的一部分(右侧)。

I read a lot of articles and tutorials, but the most parts were for a div, element, etc... but I need that for the whole page. 我读了很多文章和教程,但是大多数部分是用于div,元素等的,但是整个页面都需要。 Here's an example (cross browser) that scrolls without scrollbar: http://jsfiddle.net/nCvMc/ 这是一个无需滚动条即可滚动的示例(跨浏览器): http : //jsfiddle.net/nCvMc/

Why if I give overflow hidden to the first div insde body (class one) the scrollbar is not hidden? 为什么如果我将溢出隐藏到第一个div insde主体(类1)中,则滚动条没有隐藏? Only works in body and html. 仅适用于body和html。

This is the link: http://satspain.sytes.net/ 这是链接: http : //satspain.sytes.net/

Thanks. 谢谢。

EDIT: to fix the svg height problem in IE there's to set the height for the img element, not for the div container. 编辑:要修复IE中的svg高度问题,需要为img元素而不是div容器设置高度。

#intel img {
    height: 60px;
{

I don't know if it's best to delete the container and set the margin and size (height and width) of the img instead... 我不知道是否最好删除容器并设置img的边距和大小(高度和宽度)...

This is a working solution to hide the scrollbar in all browers and still be able to scroll. 这是一种在所有浏览器中隐藏滚动条并且仍然能够滚动的有效解决方案。 Just adding two extra parent divs to our page. 只需在我们的页面中添加两个额外的父div。

<body>
    <div class="one">
        <div class"two">
            web here (including header and footer)
        </div>
    </div>
</body>

Solution: 解:

html {
    height: 100%;
    overflow-x: hidden;
}

body {
    height: 100%;
    width: 100%;
}

.one {
    height: 100%;
    width: 1920px;
    overflow: hidden;
}

.two {
    position: relative;
    height: 100%;
    width: 1940px;
    overflow-y: scroll;
    overflow-x: hidden;
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM