聚合物：布局在Firefox中搞砸，在Chrome中很好 [英] Polymer: Layout screwed up in Firefox, fine in Chrome

查看：184
本文介绍了聚合物：布局在Firefox中搞砸，在Chrome中很好的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

因此，我知道网络组件Shadow DOM等仅在Chrome中本地实现。



为了支持Firefox，需要使用Polyfill。根据该网站，Polymer在Firefox中支持polyfill：

，但是如果我在我自己的网站上使用纸张下拉菜单，就像在聚合物网站上描述的一样，完全搞砸了。为什么？


我缺少什么？



编辑1
我发现要在Firefox中获得标题面板正确，我必须删除index.php中的CSS div {...}：



在我看来，像Shadow DOM不能正常工作，即使我已经导入了webcomponents.js，这应该是Polyfill所需要的。



编辑2

我使用Firebug浏览Firefox，我可以看到以下内容：





编辑3
I使用Firebug调试Firefox，下图。正如我所看到的，使用Polyfill的ShadowDOM确实被检测和使用。你同意吗？ =）







index.php 

 <！DOCTYPE html>< html xmlns =http://www.w3.org/1999/xhtml>< head> <标题> LEO< /标题> < script src =/ components / webcomponentsjs / webcomponents.js>< / script> < link rel =importhref =/ components / font-roboto / roboto.html> < link rel =importhref =/ components / core-header-panel / core-header-panel.html> < link rel =importhref =/ components / core-toolbar / core-toolbar.html> < link rel =importhref =/ components / core-icons / core-icons.html> < link rel =importhref =/ components / paper-shadow / paper-shadow.html> < link rel =importhref =/ components / paper-button / paper-button.html> < link rel =importhref =/ my-components / logout-button / logout-button.html> < link rel =importhref =/ my-components / assignment-card / assignment-card.html> <风格> html，body {height：100％; margin：0px; background-color：＃E5E5E5; font-family：'RobotoDraft'，sans-serif; } paper-shadow {width：300px;背景：#FFF; margin：10px;填充：10px; } div {padding：10px; margin：10px; }< / head>< body fullbleed layout vertical><？phpsession_start（）; if（！isset（$ _ SESSION ['session_userId']））{echoNot logged in; }？>< core-header-panel flex layout> <芯工具栏> < div flex> LEO 1< / div> < DIV> <注销按钮>< /注销按钮> < / DIV> < /芯工具栏> < div id =id1横向布局> <分配卡>< /分配卡> < / DIV>< /核心报头-面板><脚本> < /脚本> < / body>< / html>

data-console =falsedata-hide =falsedata-lang =jsdata-hide =false falsedata-babel =false>

< link rel = importhref =/ components / polymer / polymer.html>< link rel =importhref =/ components / core-icons / core-icons.html>< link rel =import href =/ components / paper-button / paper-button.html>< link rel =importhref =/ components / core-item / core-item.html>< link rel = importhref =/ components / core-menu / core-menu.html>< link rel =importhref =/ components / core-dropdown / core-dropdown.html>< link rel =importhref =/ components / core-dropdown-menu / core-dropdown-menu.html>< link rel =importhref =/ components / paper-item / paper-item.html >< link rel =importhref =/ components / paper-menu / paper-menu.html>< link rel =importhref =/ c omponents / paper-dropdown / paper-dropdown.html>< link rel =importhref =/ components / paper-dropdown-menu / paper-dropdown-menu.html>< link rel = importhref =/ components / core-ajax / core-ajax.html>< link rel =importhref =/ components / core-tooltip / core-tooltip.html>< polymer-元素名称=分配卡> <模板> <风格> input {padding：10px; font-family：'RobotoDraft'，sans-serif; font-size：16px; margin：0px; } core-icon [icon =error] {width：40px; height：40px;红色; } core-icon [icon =perm-identity] {width：40px; height：40px; } core-icon [icon =lock-outline] {width：40px; height：40px; } core-icon [icon =arrow-forward] {color：＃e4e4e4; } core-icon {color：＃808080; } paper-button {background-color：＃6fd177; margin：0px; } core-field {margin-bottom：10px; } div [id =container] {background：＃C0C0C0;填充：5px; } div {margin：10px; font-size：12px; }< / style> < div id =containerlayout vertical> < div layout horizo​​ntal> < core-label> Starttid：14：13< / core-label> < core-label flex>< / core-label> < core-label> Uppdrags-id：13213241< / core-label> < / DIV> < div>< core-label> Kertin Karlsson，< / core-label>< / div> < div layout horizo​​ntal relative> < paper-dropdown-menu raised label = - Väljstyle ='background：#fff;填充：5px; margin：0px; margin-right：15px; 'flex> < paper-dropdown class =dropdownlayered =true> < core-menu class =menu> < template repeat ={{助手助理}}> < paper-item name ={{assistant.id}}> {{assistant.name}}< / paper-item> < /模板> < /芯菜单> < /纸张下拉> < /纸张下拉-菜单> <纸张按钮> Tilldela< /纸张按钮> < / DIV> < / DIV> < core-ajax id =coreAjax1url =http://192.168.1.108/relay.phpmethod =postparams ='{{json}}'handleAs =jsonon-core-response = {{用handleResponse}} > < /芯AJAX> < /模板> <脚本> Polymer（'assignment-card'，{ready：function（）{this.assistants = [{id：1，name：'Kalle'}，{id：2，name：'Ted'}，{id：3，name ：'Micke'}，{id：4，name：'Bengt'}，];}}）; < / script>< / polymer-element>

data-console =logout-button.html
$ b

< link rel =importhref =/ components / polymer / polymer.html>< link rel =importhref =/ components / core-icons / core-icons.html>< link rel = importhref =/ components / paper-button / paper-button.html>< link rel =importhref =/ components / core-ajax / core-ajax.html>< polymer- element name =logout-button> <模板> <风格>纸按钮{背景：＃DF0101;白颜色; }< / style> < core-ajax id =coreAjax1url =http://192.168.1.108/logout.phpon-core-response ={{handleResponse}}> < /芯AJAX> <纸张按钮抬起id =btnLogouton-click ={{onLogoutClicked}}> Logga ut& nbsp; < core-icon icon =highlight-remove>< / core-icon> < /纸张按钮> < /模板> <脚本>聚合物（'logout-button'，{onLogoutClicked：function（）{this。$。coreAjax1.go（）;}，handleResponse：function（e）{document.location.href ='/index.php';}}） ; < / polymer-element>

解决方案

问题依然存在，因为firefox不会创建阴影DOM，而是直接显示阴影内容。所以下面的代码片断把整个视图搞得一团糟：

paper-shadow {width：300px;背景：#FFF; margin：10px; padding：10px;} div {padding：10px;如果您删除了该代码并添加了一些内容，则可以使用这些代码来创建一个新的代码：margin：10px;}

具体的代码，那么它将工作。下面给出了具体代码的index.php片段。



<！DOCTYPE html>< html xmlns =http：//

So, I am aware the web components, Shadow DOM and such is only implememted natively in Chrome today.

For support in Firefox, Polyfill is needed. According to the website, Polymer has polyfill support in Firefox:

https://www.polymer-project.org/resources/compatibility.html

but when I have made a very simple page, it looks completely screwed up i Firefox. But, if I try the Polymer website in Firefox, it works there without any obvious problems.

Test URL: http://misc.snapcode.se/polymer/

Here is how my test-site looks in Chrome:

and in Firefox:

The code can be seen below.

  • But they say that Firefox has Polyfill support, and it supports CSS, so why is the layout/design so screwed up?
  • How come they get their own site to work in Firefox, but a super-simple site I build is screwed up?
  • If I try out the paper-dropdown in FF, it works fine on their demo site, but if I use the paper-dropdown on my own site, constructed the same way as described on the polymer website, its completely screwed up. Why?

What am I missing?

EDIT 1 I found out that to get the header panel "right" in Firefox, I have to remove the CSS in index.php for the div {...}:

That seems to me like the Shadow DOM isnt working correctly, even though I have imported webcomponents.js, which should be the Polyfill needed.

EDIT 2

I have looked in Firefox using Firebug and I can see the following:

As I can see it, webcomponents.min.js is imported (I tested different js files), and there is some stuff talking about ShadowDOMPolyfill. So, it is even weirder now I think.

EDIT 3 I debugged Firefox using Firebug, image below. As I see it, ShadowDOM using Polyfill is indeed detected and used. Do you agree? =)

index.php 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LEO</title>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/components/font-roboto/roboto.html">
    <link rel="import" href="/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/components/core-icons/core-icons.html">
    <link rel="import" href="/components/paper-shadow/paper-shadow.html">
    <link rel="import" href="/components/paper-button/paper-button.html">
    <link rel="import" href="/my-components/logout-button/logout-button.html">
    <link rel="import" href="/my-components/assignment-card/assignment-card.html">

    <style>
        html, body {
            height: 100%;
            margin: 0px;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
        }
        paper-shadow {
            width: 300px;
            background: #FFF;
            margin: 10px;
            padding: 10px;
        }
        div {
            padding: 10px;
            margin: 10px;
        }

    </style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
    echo "Not logged in";
    
}
?>
<core-header-panel flex layout>
    <core-toolbar>
        <div flex>LEO 1</div>
        <div>
            <logout-button></logout-button>
        </div>
    </core-toolbar>

    <div id="id1" horizontal layout >
      <assignment-card></assignment-card>
    </div>
</core-header-panel>

<script>
   
</script>
    
</body>
</html>

assignment-card.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-item/core-item.html">
<link rel="import" href="/components/core-menu/core-menu.html">
<link rel="import" href="/components/core-dropdown/core-dropdown.html">
<link rel="import" href="/components/core-dropdown-menu/core-dropdown-menu.html">

<link rel="import" href="/components/paper-item/paper-item.html">
<link rel="import" href="/components/paper-menu/paper-menu.html">
<link rel="import" href="/components/paper-dropdown/paper-dropdown.html">
<link rel="import" href="/components/paper-dropdown-menu/paper-dropdown-menu.html">


<link rel="import" href="/components/core-ajax/core-ajax.html">
<link rel="import" href="/components/core-tooltip/core-tooltip.html">


<polymer-element name="assignment-card">
    <template>
         <style>
            input {
                padding: 10px;
                font-family: 'RobotoDraft', sans-serif;
                font-size: 16px;
                margin: 0px;
            }
             core-icon[icon="error"] {
                width: 40px;
                height: 40px;
                color: red;
            }
            core-icon[icon="perm-identity"] {
                width: 40px;
                height: 40px;
            }
            core-icon[icon="lock-outline"] {
                width: 40px;
                height: 40px;
            }
            core-icon[icon="arrow-forward"] {
                color: #e4e4e4;
            }
            core-icon {
                color: #808080;
            }
            paper-button {
                background-color: #6fd177;
                margin: 0px;
            }
            core-field {
                margin-bottom: 10px;
            }
            div[id="container"] {
                background: #C0C0C0;
                padding: 5px;
            }
            div
            {
                margin: 10px;
                font-size: 12px;
            }
        </style>
        
        <div id="container" layout vertical >
            <div layout horizontal>
                <core-label >Starttid: 14:13</core-label>
                <core-label flex></core-label>
                <core-label >Uppdrags-id: 13213241</core-label>
            </div>
            
            <div><core-label>Kertin Karlsson,</core-label></div>
            <div layout horizontal relative>
                <paper-dropdown-menu raised label="-Välj" style='background: #fff; padding: 5px; margin: 0px; margin-right: 15px; ' flex>
                    <paper-dropdown class="dropdown" layered="true">
                        <core-menu class="menu">
                            <template repeat="{{assistant in assistants}}">
                                <paper-item name="{{assistant.id}}">{{assistant.name}}</paper-item>
                            </template>
                        </core-menu>
                    </paper-dropdown>
                </paper-dropdown-menu>
                <paper-button raised>Tilldela</paper-button>
            </div>
        </div>
        
        <core-ajax 
                   id="coreAjax1" 
                   url="http://192.168.1.108/relay.php" 
                   method="post" 
                   params='{{json}}'
                   handleAs="json" 
                   on-core-response="{{handleResponse}}">
        </core-ajax>
    </template>
    <script>
        Polymer('assignment-card', {
            ready: function() {
                this.assistants = [
                  {id: 1, name: 'Kalle'},
                  {id: 2, name: 'Ted'},
                  {id: 3, name: 'Micke'},
                  {id: 4, name: 'Bengt'},
        ];
            }
        });
    </script>
</polymer-element>

logout-button.html

<link rel="import" href="/components/polymer/polymer.html">
<link rel="import" href="/components/core-icons/core-icons.html">
<link rel="import" href="/components/paper-button/paper-button.html">
<link rel="import" href="/components/core-ajax/core-ajax.html">

<polymer-element name="logout-button">
    <template>
        <style>
            paper-button
            {
                background: #DF0101;
                color: white;
            }
        </style>
        <core-ajax 
                   id="coreAjax1" 
                   url="http://192.168.1.108/logout.php" 
                   on-core-response="{{handleResponse}}">
        </core-ajax>
        
        <paper-button raised id="btnLogout" on-click="{{onLogoutClicked}}">Logga ut&nbsp;
                <core-icon icon="highlight-remove"></core-icon>
        </paper-button>
    </template>
    <script>
        Polymer('logout-button', {
            onLogoutClicked: function()
            {
                
                this.$.coreAjax1.go();
            },
            handleResponse: function(e)
            {
                document.location.href = '/index.php';
            }
        });
    </script>
</polymer-element>

解决方案

The problem persist because firefox does not create shadow DOM but it displays shadow content directly. So the following snippet screws the overall view:

paper-shadow {
    width: 300px;
    background: #FFF;
    margin: 10px;
    padding: 10px;
}
div {
    padding: 10px;
    margin: 10px;
}

If you remove that code and add some specific code then it will work. The snippet for index.php with specific code is given below.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LEO</title>
    <script src="/components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="/components/font-roboto/roboto.html">
    <link rel="import" href="/components/core-header-panel/core-header-panel.html">
    <link rel="import" href="/components/core-toolbar/core-toolbar.html">
    <link rel="import" href="/components/core-icons/core-icons.html">
    <link rel="import" href="/components/paper-shadow/paper-shadow.html">
    <link rel="import" href="/components/paper-button/paper-button.html">
    <link rel="import" href="/my-components/logout-button/logout-button.html">
    <link rel="import" href="/my-components/assignment-card/assignment-card.html">

    <style>
        html, body {
            height: 100%;
            margin: 0px;
            background-color: #E5E5E5;
            font-family: 'RobotoDraft', sans-serif;
        }
        assignment-card,
        logout-button{
            margin: 10px;
        }
        logout-button paper-button{
            top: 3px;
        }

    </style>
</head>
<body fullbleed layout vertical>
<?php
session_start();
if (!isset($_SESSION['session_userId']))
{
    echo "Not logged in";
    
}
?>
<core-header-panel flex layout>
    <core-toolbar>
        <div flex>LEO 1</div>
        <div>
            <logout-button></logout-button>
        </div>
    </core-toolbar>

    <div id="id1" horizontal layout >
      <assignment-card></assignment-card>
    </div>
</core-header-panel>

<script>
   
</script>
    
</body>
</html>

这篇关于聚合物：布局在Firefox中搞砸，在Chrome中很好的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆