我一直在开发一个简单的 WordPress 插件,它显示一条关于在网站上使用 cookie 的简单消息。
它已部署在我公司的各种 WordPress 网站和 HTML 网站上。但是,插件的显示方式存在一些很大差异。
这就是消息在 WordPress 主站点上的显示方式。这也是在其 HTML 网站上运行时的外观
但是,在另一个 WordPress 网站上,它看起来像这样:
图像被压在网站上,占据了网站的左侧。
两个 WordPress 站点都使用相同版本的 WordPress (3.3.1),并且它们在各种浏览器(IE、Chrome、Firefox)中的显示方式没有变化。
为什么相同的插件在相同版本的 WordPress 中显示如此不同?
样式.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>