IEで印刷時特定のページのレイアウトが崩れる

前提・実現したいこと

HPの修正を任されました。
IEで特定のページを印刷しようと印刷プレビューを押すと通常、2～3ページほどで済む筈が100ページ以上表示されます。

表があり、その下に余計な余白が出来て、10ページ以上下記の図のような状態になっています。
10ページ毎に表示させたい内容が表示されると下記の状態の繰り返しになります。

Chromeでは正常に印刷が出来ています。
他のHPはIEで印刷が出来ています。

上記の特定のHPのページのみ出来ない状態になっています。

該当のソースコード

事象が発生しているページのCSSです。

/* -------------------------
 * レイアウトが崩れているページのタイトル
 ------------------------- */
div.check_link {
  margin: 20px;
  padding: 20px;
  background-color: #f5f2f0;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
div.check_link p {
  margin: 0;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
}
div.check_link p:before {
  position: relative;
  bottom: 1px;
  margin-right: 10px;
  content: "CHECK!";
  color: #f0a700;
  font-size: 14px;
}
div.check_link a {
  font-size: 18px;
}
div.check_link a:hover {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  color: #f8b500;
}
div.check_link a:hover:before {
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
  opacity: 0.8;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  filter: alpha(opacity=80);
}

理由は分かりませんが、同じCSS内で指定がされていたのでそちらも記載しておきます。

/* -------------------------
 * レイアウトが崩れていないページのタイトルとレイアウトが崩れているページのタイトル
 ------------------------- */
ul.list {
  max-width: 560px;
  min-width: 320px;
  border: 1px solid #ccc;
}
ul.list li {
  border-bottom: 1px solid #ccc;
  overflow: hidden;
  zoom: 1;
}
ul.list li:before,
ul.list li:after {
  content: "";
  display: table;
}
ul.list li:after {
  clear: both;
}
ul.list li div {
  float: left;
}
ul.list li div.label {
  width: 150px;
  margin: 0;
  margin-bottom: 0px;
  padding: 10px;
  padding-top: 12px;
  padding-bottom: 0px;
  font-weight: bold;
}
ul.list li div.label label {
  cursor: pointer;
}
ul.list li div.input,
ul.list li div.confirm,
ul.list li div.description {
  overflow:hidden;
  width: 370px;
  padding: 10px;
}
ul.list li.required label:after {
  content: " (*)";
  color: #f00;
  font-weight: bold;
}

htmlの冒頭部分と表示させたい内容の一部を記載しておきます。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Language" content="ja">
    <title>XXXXXXXXXXX</title>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="description" content="XXXXXXXXXXX">
    <meta name="keywords" content="XXXXXXXXXXX">
    <meta name="application-name" content="XXXXXXXXXXX">
    <meta property="og:site_name" content="XXXXXXXXXXX">
    <meta property="og:title" content="XXXXXXXXXXX">
    <meta property="og:description" content="XXXXXXXXXXX">
    <meta property="og:url" content="XXXXXXXXXXX">
    <meta property="og:image" content="XXXXXXXXXXX">
    <meta property="og:type" content="XXXXXXXXXXX">
    <meta property="og:locale" content="XXXXXXXXXXX"><!--[if lte IE 9]>
    <script src="XXXXXXXXXXX"></script><![endif]-->
    <link rel="stylesheet" href="XXXXXXXXXXX">
    <link rel="stylesheet" href="XXXXXXXXXXX">
    <script src="XXXXXXXXXXX"></script><!--[if lte IE 9]>
    <script src="XXXXXXXXXXX"></script><![endif]-->
    <script src="XXXXXXXXXXX></script>
  </head>

上記がhead内の内容です。

<h2>XXXXXXXXXXX</h2>
          </div>
          <div class="intro">XXXXXXXXXXX</div>
          <div class="content_inner">
            <ul class="list">
              <li>
                <div class="label">
                  <label>XXXXXXXXXXX</label>
                </div>
                <div class="description">XXXXXXXXXXX<br/>
                XXXXXXXXXXX</div>
              </li>
              <li>
                <div class="label">
                  <label>XXXXXXXXXXX</label>
                </div>
                <div class="description">
                <a style="margin-left:-9px"  width="100px">XXXXXXXXXXX</a>
		<br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX <br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX<br/>
		XXXXXXXXXXX<br/>

上記は表示させたい内容の一部です。

試したこと

最初、htmlが違うのかと思い、htmlを触っていましたが、表示させたい内容のレイアウトが崩れたりするので根本的な解決にならないのでCSSを変更しようと思い、調べながらpaddingを0pxにしたりしていますが、自分自身の知識が足らず、質問させて頂きました。

補足情報（FW/ツールのバージョンなど）

IE11
Windows7
をそれぞれ使用しています。

spookybird

2018/09/07 03:17

コードが断片的すぎて事象の再現ができません。ソースコードなしで解析してと言われてもさすがに無理です。もし絶対に公開できないコードなのであればお金を払って解析できるエンジニアを雇ってください。

行動規範の内容に同意します

回答1件

自己解決

遅くなりましたが、自己解決法を掲載させていただきます。

cssの内容に原因がありました。
特にサイズを指定させている位置です。
以下は問題があったcssの一部です。

ul.list li div.label {
  width: 150px;
  margin-bottom: -10000px;
  padding: 10px;
  padding-top: 12px;
  padding-bottom: 10000px;
  font-weight: bold;
}
ul.list li div.label label {
  cursor: pointer;
}
ul.list li div.input,
ul.list li div.confirm,
ul.list li div.description {
  overflow:hidden;
  width: 370px;
  padding: 10px;
}

lavelタグの部分の

padding-bottom: 10000px;
が印刷時に縦に広がるような表示設定をしていたのが原因でした。

なので、全体の見栄えが良くなるように

ul.list li div.label {
  width: 150px;
  margin: 0;
  margin-bottom : -10000px;
  padding-left: 10px;
  padding-top: 12px;
  padding-bottom: 20px;
  font-weight: bold;
}
ul.list li div.label label {
  cursor: pointer;
}
ul.list li div.input,
ul.list li div.confirm,
ul.list li div.description {
  overflow:hidden;
  width: auto;
  padding-top:12px;
  padding-left: 178px;
  padding-bottom:10px;
}

に変更を行ったところ、印刷が正常なページ数で表示がされるようになりました。
このcssは数年前に業者が作ったと聞いていたのですが....。

遅くなりましたが、ありがとうございました。

投稿2018/10/29 00:58

HISUI

総合スコア22