gpt4 book ai didi

html - 为什么 Internet Explorer 不遵守我的 CSS 媒体打印最小/最大宽度值?

转载 作者:行者123 更新时间:2023-11-28 06:11:46 25 4
gpt4 key购买 nike

这是一个缩减的 CSS 文件:

table {
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}

table th, td {
/* Comment out the following line if you do not want borders */
border: 1px #d3d3d3 solid;
/* This is the default font for all cells */
font-family: Calibri;
}

table tbody tr:hover td {
color: #000;
background: #efefef;
}

body{
width:100%;
background: #666;
}

.containerPage {
min-width: 210mm;
max-width: 210mm;
padding-left: 2mm;
padding-right: 2mm;
margin-left: auto;
margin-right: auto;
background: #FFF;
}

.containerMeeting {

}

.tableHEADINGOuter {
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 1px gray solid;
padding-bottom: 2px;
margin-bottom: 5mm;
}

.tableHEADING {
}

.tableHEADING td {
vertical-align: bottom;
border-top-style: none;
border-left-style: none;
border-right-style: none;
border-bottom: 4px gray solid;
}

.textCongregation {
text-align: left;
font-size: 11pt;
font-weight: 700;
}

.textTitle {
text-align: right;
font-size: 18pt;
font-weight: 700;
}

@media print {
body{
background: #FFF;
}

.containerPage {
width: auto;
min-width: 100%;
max-width: 100%;
padding-left: 0;
padding-right: 0;
}
}

这是一个缩减的 HTML 文件:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<link href="test.css" rel="stylesheet" type="text/css" />
<title>CONGREGATION NAME</title>
</head>

<body>

<div class="containerPage">
<div class="containerMeeting">
<div class="tableHEADINGOuter">
<table class="tableHEADING">
<colgroup>
<col width="50%" /><col width="50%" />
</colgroup>
<tr>
<td class="textCongregation">CONGREGATION NAME</td>
<td class="textTitle">Midweek Meeting Schedule</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>

想法是,当您打开 HTML 文件时,它看起来像一个长页面:

View as opened in Internet Explorer

问题是我的打印 CSS 数据。我以为我已经设置了它,所以它会占用所有 printable 页面宽度,并且没有最小/最大值。然而,这是我在进行打印预览时得到的结果:

Print preview in Internet Explorer

如您所见,它在右边缘进行裁剪。我做错了什么?

谢谢。

附言。我见过这个类似的问题,但就我而言,我已经规定了单位类型:

CSS media queries min-width/max-width not being called

最佳答案

min-widthmax-width 属性不考虑ma​​rginspadding

所以我不得不扩展我的 CSS 文件以将填充重置为零,因为它们会从父项中获取 2mm 的填充。

@media print {
body{
background: #FFF;
}

.containerPage, .containerMeeting, .tableDATE, .tableHEADINGOuter, .tableHEADING, .tableTFGW, .tableAYFM, .tableLAC, {
width: 99%;
min-width: 99%;
max-width: 99%;
padding-left: 0;
padding-right: 0;
margin-left:0;
margin-right:0;
}
}

关于html - 为什么 Internet Explorer 不遵守我的 CSS 媒体打印最小/最大宽度值?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36126946/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com