Fieldset在打印视图中丢失样式

时间:2013-08-15 14:09:14

标签: html css printing preview fieldset

在字段集中显示的信息取自内容管理系统中的数据库。

当作为普通页面查看时,信息的样式正确,但是当在打印预览中查看页面时,字段集中的信息与页面左侧对齐,样式丢失!

我到处寻找解决方案,人们提到移除花车等,但我似乎无法解决这个问题!

问题似乎发生在我尝试的所有浏览器中(Safari,Chrome和Firefox)。

表格中有少量数据,格式正确:/

从页面查看: page view

从打印预览中查看 print view

非常感谢任何帮助!

编辑:这些是我们要求的小代码片段 - 那里有很多代码!

HTML

<div class="divClass" id="Person_title_div" >
    <label class="divLabel"  for='Person_title' id="Person_title.label"
            >Title </label>
    <div class="divValue">
    <input type="hidden" name="Person.title" value="-5509180968589174739" />
    <a href="../Title/view.jsp?id=-5509180968589174739&myCode=A1925C9679A8851CCA17D1269771AD4F"><span  >Dr</span></a>
</div>

</div>           

<div class="divClass" id="Person_knownAs_div" >
    <label class="divLabel"  for='Person_knownAs' id="Person_knownAs.label"
            >Name </label>
    <div class="divValue">

    <span  >qwe qwe</span>
</div>

</div>          

<div class="divClass" id="Person_email_div" >
    <label class="divLabel"  for='Person_email' id="Person_email.label"
            >Email </label>
    <div class="divValue">

    <span  >qwe@qew</span>
</div>

</div>  

CSS

div.divClass,
div.formWidget,
div.multiList {
  float: left;
  position:relative;
  margin:0 5px 5px 0;
  min-height:30px;
  width:310px;
}

fieldset {
    clear: both;
    border: 1px solid #888;
    border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
}

print.css

/* print styles */

body {  background: white;  font-size: 8pt;     font-family: Verdana, Arial; }

#firstMenu,

#secondMenu,

#additionalMenu,

#footernav,

#selectheader ul,

input,

a img#logo {    width: 58px;    height: 70px; }

a:link, a:visited {     color: #520;    background: transparent;    font-weight: normal;    text-decoration: none; }

header {    height: 105px;  background: url(images/header.gif) no-repeat; }

div#mainData td, div#mainData th {      float: none !important;     display: inline !important;     padding-left: 1em;      padding-right: 1em;  }

table.datatable th, table.datatable td {

    vertical-align: top;

    /*For some reason table text is coming out inconsistent.  Must be being inherited somewhere, 

    but difficult to pin down.  Therefore force to specific pixel value as a work around */

    font-size: 9px;

}/* CSS Document */

.menu {
    display: none; }

.session {
    display: none; }

0 个答案:

没有答案