聚合物：在Firefox中搞定了布局，在Chrome中很好

时间：2014-12-15 08:54:25

标签： css google-chrome firefox polymer web-component

所以，我知道网络组件，Shadow DOM等只是今天在Chrome中实现的。

要获得Firefox的支持，需要Polyfill。根据该网站，Polymer在Firefox中支持polyfill：

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

但是当我做了一个非常简单的页面时，它看起来完全搞砸了我的Firefox。但是，如果我在Firefox中尝试Polymer website，它可以在那里工作而没有任何明显的问题。

测试网址 http://misc.snapcode.se/polymer/

以下是我的测试网站在Chrome中的显示方式：

enter image description here

并在Firefox中：

enter image description here

代码如下所示。

  • 但他们说Firefox支持Polyfill，它支持CSS，那么为什么布局/设计如此搞砸？
  • 为什么他们让自己的网站在Firefox上工作，但是我构建的一个超级简单的网站搞砸了？
  • 如果我尝试使用FF中的纸张下拉菜单，它可以正常工作on their demo site，但如果我在自己的网站上使用纸张下拉菜单，则按照聚合物网站上所述的相同方式构建，它完全搞砸了。为什么？

我错过了什么？

编辑1 我发现为了让Firefox中的标题面板“正确”，我必须在index.php中删除div {...}中的CSS：

enter image description here

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

编辑2

我使用Firebug查看了Firefox，我可以看到以下内容：

enter image description here

正如我所看到的，导入了webcomponents.min.js（我测试了不同的js文件），并且有一些东西在谈论ShadowDOMPolyfill。所以，我认为现在更加怪异。

编辑3 我使用Firebug调试了Firefox，如下图所示。在我看来，确实检测并使用了使用Polyfill的ShadowDOM。你同意吗？ =）

enter image description here

的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>

赋值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>

注销-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>

1 个答案:

答案 0 :(得分：0)

问题仍然存在，因为firefox不会创建shadow DOM，但会直接显示阴影内容。因此，以下代码段将整体视图搞定：

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

如果您删除该代码并添加一些特定代码，那么它将起作用。 index.php的代码片段具有特定代码，如下所示。

＆＃13;
＆＃13; 
<!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>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题