[英]CSS margin-left is breaking in Chrome Extension
My situation is extremely confusing, and I haven't the slightest clue what's going on. 我的情况非常令人困惑,我一点也不知道发生了什么。 I made a Firefox add-on to redesign a website using jQuery and CSS.
我使用jQuery和CSS制作了一个Firefox附加组件来重新设计网站。 When I tried to migrate the addon to Chrome (that part was simple, because the features I am using in each SDK are very similar), everything worked except one of the main design elements:
当我尝试将插件迁移到Chrome时(这部分很简单,因为我在每个SDK中使用的功能非常相似),除了主要设计元素之外,一切都有效:
I have a menu with position: fixed;
我有一个
position: fixed;
菜单position: fixed;
aligned to the left of the page, and margin-left: 150px;
对齐到页面左侧,
margin-left: 150px;
on the main container element. 在主要容器元素上。 The problem is that the
margin
is completely disappearing when I open it in Chrome. 问题是当我在Chrome中打开它时,
margin
完全消失了。 It works fine in Firefox. 它在Firefox中运行良好。
So then I copied all of the HTML, CSS, and JavaScript into a jsFiddle, and the margin worked fine. 然后我将所有HTML,CSS和JavaScript复制到jsFiddle中,并且保证金工作正常。 Everything was completely identical, so I can't figure out why it would work in jsFiddle but not on the website.
一切都完全相同,所以我无法弄清楚为什么它会在jsFiddle中起作用而不是在网站上起作用。
Using left: 150px
works, but then the page spills 150px to the right, and those dreaded horizontal scrollbars appear. 使用
left: 150px
有效,但页面向右溢出150px,然后出现那些可怕的水平滚动条。
Links: 链接:
Extension File (CRX): https://docs.google.com/open?id=0B3k3BjZD2YfiTWNzTlhsa0t5STg 扩展文件(CRX): https ://docs.google.com/open ? id = 0B3k3BjZD2YfiTWNzTlhsa0t5STg
Demo Website: http://demo.flvs.net (Username: demo, Password: demo) 演示网站: http : //demo.flvs.net (用户名:demo,密码:demo)
jsFiddle (Some images don't load, but the code is identical): http://jsfiddle.net/CjSXA/ jsFiddle(有些图片不加载,但代码相同): http : //jsfiddle.net/CjSXA/
I just removed the margin-left from #page_cont and added it to #content-cont. 我刚从#page_cont中删除了margin-left并将其添加到#content-cont。
That made the content stop hiding under the menu, though the footer is still partially covered by it. 这使得内容停止隐藏在菜单下,尽管页脚仍被其部分覆盖。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.