自己的插件在单个WordPress版本上显示不一致

时间:2013-06-12 10:06:22

标签: css wordpress wordpress-plugin

我一直在开发一个简单的WordPress插件,它显示一条关于在网站上使用cookies的简单消息。

它已部署在我公司的各种WordPress网站和HTML网站上。但是,插件的显示方式存在很大差异。

http://img526.imageshack.us/img526/4240/dfdsfasfda.png

这是消息在主WordPress站点上的显示方式。这也是它在HTML网站上运行时的外观

但是,在另一个WordPress网站上,它看起来像是这样:

http://imageshack.us/a/img209/5092/20130612103958.png

图像被压扁到网站上,它占据了网站的左侧。

两个WordPress网站都使用相同版本的WordPress(3.3.1),并且它们在各种浏览器(IE,Chrome,Firefox)中的显示方式没有变化。

为什么同一个插件在相同版本的WordPress中的显示方式如此不同?

的style.css

.popup-box {    
    position: fixed;
    left:50%;
    margin-right: auto;
    border-radius: 3px;
    padding:10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 5);
    z-index:10000;

}

.popup-box .popup-inner {
    float:left;
}

Popup.php - 根据管理员选择设置属性。

    <style type="text/css">
    .popup-box {
        width:<?php if(get_option('width') != ''){ echo get_option('width');}else{ echo '200';}?>px;
        background-colour:<?php if(get_option('bgcolour') != ''){ echo get_option('bgcolour');}else{ echo '#000000';} ?>;
        color:<?php if(get_option('fontcolour') != ''){ echo get_option('fontcolour');}else{ echo '#FFFFFF';} ?>;
        font-size:<?php if(get_option('fontsize') != ''){ echo get_option('fontsize'); } else{ echo '13px';} ?>px;
        margin-left:<?php if (get_option('width') !=''){echo 0 - (get_option('width')/2);} else {echo '-100';}?>px;
        <?php if(get_option('position') != ''){ echo get_option('position');}else{ echo 'bottom';} ?>:0px;

    }

    .popup-box .popup-inner {
        width:<?php echo get_option('width'); ?>px;
        line-height:<?php echo (get_option(fontsize')+ 6); ?>px;
    }
    </style>

Popup.php - 显示弹出窗口

    if(get_option('display') == 'yes'){
    ?>

<body onload="check()">

<div class="popup-box" id="x">
    <div class="sticky-inner"><?php echo stripslashes(get_option('popup_message')); ?></div>
    <input id="btnAgree" type="button" value ="I agree" onclick="save()"/>
    <input id="btnDisagree" type="button" value ="I disagree" onclick="hide()"/>
</div>

1 个答案:

答案 0 :(得分:1)

您可能在插件未按要求呈现的网站上存在冲突的CSS规则或JavaScript错误。使用Firebug并检查控制台/样式面板是否有错误。