問題

bx-sliderを使ってタブを実装しているページを印刷する時に画像が横にはみ出したり、タブ部分の終わりの部分と、タブの下にある要素が被ってしまったりする

原因

①縦にずれる原因

bx-sliderではページ読み込み時にタブのラッパー要素の高さを設定するが、印刷画面では高さの再設定はされない。
大体Webページより印刷画面の方が狭いので、コンテンツ部分が狭まってその分縦に伸びた要素分、印刷時にずれる。

また、印刷画面ではimg要素が切れないように改行されるので余計な空白がでてしまうことがあり、その分もずれる。

②横にずれる原因

そもそもレスポンシブサイトでない場合ははみ出る。

レスポンシブサイトでかつ、ブラウザサイズに応じてコンテンツ部分が拡縮するように作っている場合は印刷画面の横幅がブラウザサイズとして認識されコンテンツが収まるような形で印刷される。

その場合、横幅は%やブラウザサイズ以下の横幅で指定していることが多いと思うが、bx-sliderではページ読み込み時にラッパー要素に横幅を設定するので、印刷画面ではずれる原因となる。

解決

印刷画面でCSSを設定するために以下の記述を追加する。

@media print{
	.bx-viewport {
		height: auto !important;	
	}
	.tab_item {
		width: 100% !important;
		position: relative !important;
	}
}

※それぞれの環境によって変更してください。
※フェードモードじゃないと無理かも