javascript - Firefox 与 Chrome、Edge、Safari 之间的渲染差异

标签 javascript html css firefox

前几天，我posted a problem到如此。诚然，最初的帖子写得有点仓促，而且有些不完整。这被投票为题外话。尽管问题的最终编辑版本在我看来并没有偏离主题，但事实仍然是问题已结束。

为了尝试并遵守固有的规定(在我看来，这并不总是完全公平的，因为我认为如有必要，应该给予重新表述问题的机会，并且可以以建议的方式提供一些帮助) SO的局限性，我试图重新表述这个问题。其过程如下。

几年前，我编写了一个小工具(应用程序)来在图像上覆盖网格，以生成用于十字绣工作的可打印图像。当时，我专门为 Firefox 编写了这个，但我通常希望它可以在任何现代浏览器中运行。然而现在我发现它似乎只能在 Firefox 中工作! (即使在 Firefox Focus 中也不行)。

这一次的问题陈述是:此页面在 Firefox 桌面浏览器中或多或少地按预期呈现。 Firefox 是否以符合标准的方式处理页面(应用程序)？如果没有，任何人都可以解释一下发生了什么事吗？无论哪种情况，是否有一个简单的解决方法可以让此页面在 Firefox 以外的主要现代浏览器中按预期工作？ (即 Chrome、Edge、Opera、Safari 和类似浏览器的移动版本，包括 Firefox Focus)。换句话说，如果这段代码符合标准，那么我该如何处理不兼容的浏览器，或者是否可以使代码符合标准而不需要进行太多更改？

页面(应用程序)的预期行为:单击“浏览”，选择一个图像，然后单击“生成”。该图像应显示在下方，并在其顶部覆盖一个网格(或者，您可以将其视为被划分为正方形或矩形的图像)。还有关于图像应该如何准确渲染的其他细节，说明这会不必要地延长这篇文章，但是您可能可以通过查看应用程序的可用可自定义字段并可能通过尝试来弄清楚这些细节他们。这些参数通常用于更改网格单元格大小(高度、宽度)、页边距、用正方形填充页面/图像的选项等。

这是旧代码，我不想大幅重写它......

IIRC，我试图让 img 获取包含 div 的完整大小，因此position:absolute，宽度:100％，高度:100％。但与此同时，我试图调整包含的 div 的大小以适应内容，即网格。它是定义尺寸的网格。图像应该缩放到该空间......

对我来说，浏览器似乎不支持为网格指定的大小，可能是因为它是空的，但我尝试修复该问题失败了......

编辑1: 根据建议，我最终将代码减少到 HTML 和 CSS 的关键部分。我希望得到一个广泛适用于完整代码的答案，但任何想要解决核心问题的人都可以看看下面的代码片段。注意:我尚未在 FF Desktop 以外的浏览器中测试此代码，但我相信这应该可以说明问题...

table {
  border-collapse: collapse;
}
col {
  width: 30px;
}
tr {
  height: 30px;
}
table, td {
  border: 1px solid red;
}
#div {
  display: inline-block;
  position: relative;
}
#img {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}
<!DOCTYPE html>
<html>
<body>

<div id="div">
  <img id="img" src="https://www.w3schools.com/js/landscape.jpg">
  <table>
    <thead>
      <col>
      <col>
      <col>
    </thead>
    <tbody>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
      <tr><td></td><td></td><td></td></tr>
    </tbody>
  </table>
</div>

</body>
</html>

完整代码:

/*********************************************\
**  Copyright © 2017-2019 Thejaka Maldeniya  **
\*********************************************/
'use strict';
(function (a) {
	a.i()
}(
	{
		z: 0, // image file data URL
		p: '3', // previous value of units (default: Millimeters)
		f: { // functions
			_: function (l, e, h) { l.addEventListener(e, h, 0) },
			l: function (a, f) { // load files
				if (f.length) {
					f = f[0]
					var l = a.u.l, r = new FileReader()
					l.name.innerHTML = f.name
					a.f._(r, 'loadend', function (e) {
						l.preview.src = a.z = e.target.result
					})
					r.readAsDataURL(f)
				}
			},
			r: function (x) { // round to 3 decimal places
				return Math.round(x * 1000) / 1000
			},
			f: function (a, b) { // get conversion factor
				var f = 0
				if (a == b) f = 1
				else {
					// if either a or b is not known, factor will be 0
					// first, convert to Millimeters
					switch (a) { // previous units value
						case '1': // Inches
							f = 25.4
							break
						case '2': // Centimeters
							f = 10
							break
						case '3': // Millimeters
							f = 1
					}
					// second, convert from Millimeters
					switch (b) { // new units value
						case '1': // Inches
							f /= 25.4
							break
						case '2': // Centimeters
							f /= 10
							break
						case '3': // Millimeters
							// no change
					}
				}
				return f
			},
			c: function () { // units or size value changed
				var t = this, l = a.u.l
				, r = t.r // round function
				, width = l.width.value, height = l.height.value // A4
				, mt = l.top.value, mb = l.bottom.value, ml = l.left.value, mr = l.right.value // margins
				, w = l.w.value, h = l.h.value // width, height of cell
				, m = l.m.value, n = l.n.value // width, height of grid
				, s = 'A4' // paper size
				, f = t.f(a.p, a.p = l.units.value) // unit conversion factor
				, g = t.f('3', l.units.value) // unit conversion factor for default values (currently in Millimeters)
				l.width.setAttribute('readonly', '')
				l.height.setAttribute('readonly', '')
				switch (l.size.value) {
					case '0': // Custom
						l.width.removeAttribute('readonly')
						l.height.removeAttribute('readonly')
						g = f
						break
					case '1': // Letter
						width = 216
						height = 279
						l.rotate.checked = 0
						s = 'Letter'
						break
					case '3': // Legal
						width = 216
						height = 356
						l.rotate.checked = 0
						s = 'Legal'
						break
					case '6': // A3
						width = 297
						height = 420
						l.rotate.checked = 0
						s = 'A3'
						break
					case '7': // A4
						width = 210
						height = 297
						l.rotate.checked = 0
						s = 'A4'
						break
					case '8': // A5
						width = 148
						height = 210
						l.rotate.checked = 0
						s = 'A5'
				}
				l.width.value = r(width * g)
				l.height.value = r(height * g)
				l.top.value = r(mt * f)
				l.bottom.value = r(mb * f)
				l.left.value = r(ml * f)
				l.right.value = r(mr * f)
				l.w.value = r(w * f)
				l.h.value = r(h * f)
				l.m.value = m
				l.n.value = n
			}
		},
		u: {
			l: {
				style: 0,
				ui: 0,
				form: 0,
				units: 0,
				size: 0,
				width: 0,
				height: 0,
				rotate: 0,
				top: 0,
				bottom: 0,
				left: 0,
				right: 0,
				w: 0,
				h: 0,
				square: 0,
				fill1: 0,
				m: 0,
				n: 0,
				fill2: 0,
				color: 0,
				white: 0,
				black: 0,
				file: 0,
				browse: 0,
				name: 0,
				preview: 0,
				reset: 0,
				print: 0,
				page: 0,
				content: 0
			},
			f: {
				b: function (f, c) {
					return function () {
						var a = arguments, n = a.length, b = Array(n), i = 0
						for (; i < n; ++i)
							b[i] = a[i]
						f.apply(c, b)
					}
				}
			},
			e: {
				document: {
					DOMContentLoaded: function () {
					}
				},
				window: {
					load: function () {
						var a = this, l = a.u.l
						a.p = l.units.value
						if (l.size.value == '0') {
							l.width.removeAttribute('readonly')
							l.height.removeAttribute('readonly')
						}
						if (!l.square.checked)
							l.h.removeAttribute('readonly')
					}
				},
				ui: {
					dragover: function (e) {
						e.stopPropagation()
						e.preventDefault()
						e.dataTransfer.dropEffect = 'copy'
					},
					drop: function (e) {
						e.stopPropagation()
						e.preventDefault()
						this.f.l(this, e.dataTransfer.files)
					}
				},
				rotate: {
					change: function () {
						var l = this.u.l, v = l.width.value
						l.width.value = l.height.value
						l.height.value = v
						v = l.top.value
						if (l.rotate.checked) {
							l.top.value = l.left.value
							l.left.value = l.bottom.value
							l.bottom.value = l.right.value
							l.right.value = v
						} else {
							l.top.value = l.right.value
							l.right.value = l.bottom.value
							l.bottom.value = l.left.value
							l.left.value = v
						}
						v = l.w.value
						l.w.value = l.h.value
						l.h.value = v
						v = l.m.value
						l.m.value = l.n.value
						l.n.value = v
					}
				},
				w: {
					change: function (e) {
						var l = this.u.l
						if (l.square.checked)
							l.h.value = e.target.value
					}
				},
				square: {
					change: function (e) {
						var l = this.u.l
						if (e.target.checked) {
							l.h.setAttribute('readonly', '')
							l.h.value = l.w.value
						} else l.h.removeAttribute('readonly')
					}
				},
				file: {
					change: function (e) {
						e.stopPropagation()
						e.preventDefault()
						this.f.l(this, e.target.files)
					}
				},
				units: {
					change: function () {
						this.f.c(this)
					}
				},
				size: {
					change: function () {
						this.f.c(this)
					}
				},
				fill1: {
					click: function () {
						var l = this.u.l
						if (l.form.reportValidity()) {
							l.m.value = (l.width.value - l.left.value - l.right.value) / l.w.value | 0
							l.n.value = (l.height.value - l.top.value - l.bottom.value) / l.h.value | 0
						}
					}
				},
				fill2: {
					click: function () {
						var l = this.u.l
						if (l.form.reportValidity()) {
							var w = (l.width.value - l.left.value - l.right.value) / l.m.value
							, h = (l.height.value - l.top.value - l.bottom.value) / l.n.value
							if (l.square.checked)
								if (w < h) h = w
								else w = h
							l.w.value = w
							l.h.value = h
						}
					}
				},
				white: {
					click: function () {
						this.u.l.color.value = '#ffffff'
					}
				},
				black: {
					click: function () {
						this.u.l.color.value = '#000000'
					}
				},
				browse: {
					click: function () {
						this.u.l.file.click()
					}
				},
				reset: {
					click: function () {
						var l = this.u.l
						l.width.setAttribute('readonly', '')
						l.height.setAttribute('readonly', '')
						l.content.innerHTML = l.style.innerHTML = ''
					}
				},
				print: {
					click: function () {
						window.print()
					}
				},
				form: {
					submit: function (e) {
						e.stopPropagation()
						e.preventDefault()
						var a = this, l = a.u.l, u = l.units.value
						, width = l.width.value, height = l.height.value // page size
						, mt = l.top.value, mb = l.bottom.value // margins
						, ml = l.left.value, mr = l.right.value // margins
						, w = l.w.value, h = l.h.value // width, height of cell
						, m = l.m.value, n = l.n.value // width, height of grid
						switch (u) {
							case '1': // Inches
								u = 'in'
								break
							case '2': // Centimeters
								u = 'cm'
								break
							case '3': // Millimeters
							default: // use Millimeters
								u = 'mm'
						}
						l.style.innerHTML = '@page{size:' + width + u + ' ' + height + u
						+ (l.rotate.checked ? ';landscape' : '')
						+ '}@page{margin:' + mt + u + ' ' + mr + u + ' ' + mb + u + ' ' + ml + u
						+ '}@media screen{#page{width:' + width + u + ';height:' + height + u
						+ '}}#content{width:' + (width - ml - mr) + u + ';height:' + (height - mt - mb) + u
						+ '}#grid>colgroup>col{min-width:' + w + u
						+ '}#grid>tbody>tr{height:' + h + u
						+ '}#grid,#grid>colgroup>col,#grid>tbody>tr{border-color:' + l.color.value
						+ '}'
						l.content.innerHTML = '<div id="box"><img alt="" id="image" src="' + a.z
						+ '"><table id="grid"><colgroup>'
						+ '<col>'.repeat(m) + '</colgroup>'
						+ '<tr></tr>'.repeat(n)
						+ '</table></div>'
					}
				}
			},
			i: function (p) {
				var t = this, l = t.l, b = t.f.b, e = t.e, i, j, k
				for (i in l)
					l[i] = document.getElementById(l[i] || i)
				l.window = window
				l.document = document
				for (i in e) {
					k = e[i]
					for (j in k)
						l[i].addEventListener(j, b(k[j], p), 0)
				}
			}
		},
		i: function () {
			var t = this
			t.u.i(t)
		}
	}
))
/*********************************************\
**  Copyright © 2017-2019 Thejaka Maldeniya  **
\*********************************************/

hr {
	border: 1px solid #797;
}
table {
	border-collapse: collapse;
}
h1 {
	margin-top: 0;
	font-size: x-large;
}
h3 {
	margin-bottom: 0;
	font-size: medium;
}
input, select, button {
	margin: 1px;
	padding: 1px 4px 2px;
}
input:not([type=checkbox]), select, button {
	vertical-align: middle;
}
input[type=checkbox] {
	margin-right: 5px;
}
label {
	vertical-align: 1px;
}
input, select {
	border: 1px solid #898;
	background: #efe;
	color: #353;
}
select {
	padding: 0 0 1px;
}
input[readonly] {
	background-color: #cdc;
}
input[type=file] {
	display: none;
}
button {
	border: 1px solid #898;
	border-radius: 6px;
	background: #bcb;
	padding-right: 6px;
	padding-left: 6px;
	color: #353;
	cursor: pointer;
}
button:hover {
	border-color: #899;
	background-color: #cdd;
	color: #465;
}
.tt {
	margin-left: 5px;
}
.tt td {
	padding: 2px;
}
#ui {
	border: 2px solid #8a8;
	border-radius: 10px;
	background: #cdc;
	padding: 10px;
	color: #575;
}
#name, #preview {
	border: 1px solid #898;
	padding: 5px;
}
#preview {
	display: inline-block;
	width: 256px;
}
#page, #content {
	display: flex;
	align-items: center;
	justify-content: center;
}
#content {
	overflow: hidden;
}
#box {
	position: relative;
}
#image {
	z-index: -1;
	position: absolute;
	width: 100%;
	height: 100%;
	object-position: center;
	object-fit: contain;
}
#grid {
	table-layout: fixed;
	margin: auto;
	border: 2px solid;
}
#grid > colgroup > col {
	border-right: 1px solid;
}
#grid > colgroup > col:nth-child(10n) {
	border-right-width: 2px;
}
#grid > tbody > tr {
	border-bottom: 1px solid;
}
#grid > tbody > tr:nth-child(10n) {
	border-bottom-width: 2px;
}
#footer {
	margin-top: 20px;
	border-top: 1px solid #797;
	padding-top: 6px;
}
@media screen {
	#page {
		border: 1px solid #898;
	}
}
@media print {
	#ui {
		display: none;
	}
}
<!DOCTYPE html>
<html>
<head>
	<title>Cross-Stitch Image Generation Tool</title>
	<meta charset="utf-8">
	<style id="style"></style>
</head>
<body>
    <!-- Global site tag (gtag.js) - Google Analytics -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=UA-142604605-1"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
    
      gtag('config', 'UA-142604605-1');
    </script>
	<div id="ui">
		<h1>Cross-Stitch Image Generation Tool</h1>
		<h3>For the most basic usage, Browse an image, then click Generate, then scroll down to view the image. Possibly only works in Firefox...</h3>
		<br>
		<form id="form">
			<table class="tt">
				<tr>
					<td><label for="units">Units:</label></td>
					<td>
						<select id="units">
							<option value="1">Inches</option>
							<option value="2">Centimeters</option>
							<option value="3" selected>Millimeters</option>
						</select>
					</td>
					<td colspan="5"></td>
				</tr>
				<tr>
					<td><label for="size">Page Size:</label></td>
					<td>
						<select id="size">
							<option value="0">Custom</option>
							<option value="1">Letter</option>
							<option value="3">Legal</option>
							<option value="6">A3</option>
							<option value="7" selected>A4</option>
							<option value="8">A5</option>
						</select>
					</td>
					<td><label for="width">Width:</label></td>
					<td><input id="width" type="text" required readonly pattern="\d+(.\d+)?" value="210"></td>
					<td><label for="height">Height:</label></td>
					<td><input id="height" type="text" required readonly pattern="\d+(.\d+)?" value="297"></td>
					<td><input id="rotate" type="checkbox"><label for="rotate">Rotate</label></td>
				</tr>
			</table>
			<h3>Margins</h3>
			<table class="tt">
				<tr>
					<td><label for="top">Top:</label></td>
					<td><input id="top" type="text" required pattern="\d+(.\d+)?" value="10"></td>
					<td><label for="bottom">Bottom:</label></td>
					<td><input id="bottom" type="text" required pattern="\d+(.\d+)?" value="10"></td>
				</tr>
				<tr>
					<td><label for="left">Left:</label></td>
					<td><input id="left" type="text" required pattern="\d+(.\d+)?" value="10"></td>
					<td><label for="right">Right:</label></td>
					<td><input id="right" type="text" required pattern="\d+(.\d+)?" value="10"></td>
				</tr>
			</table>
			<h3>Grid</h3>
			<table class="tt">
				<tr>
					<td><label for="w">Cell Width:</label></td>
					<td><input id="w" type="text" required pattern="\d+(.\d+)?" value="2"></td>
					<td><label for="h">Cell Height:</label></td>
					<td><input id="h" type="text" required readonly pattern="\d+(.\d+)?" value="2"></td>
					<td><input id="square" type="checkbox" checked><label for="rotate">Same (Square)</label></td>
					<td><button id="fill1" type="button">Fill Page</button></td>
				</tr>
				<tr>
					<td><label for="m">Grid Width (cells):</label></td>
					<td><input id="m" type="text" required pattern="\d+" value="90"></td>
					<td><label for="n">Grid Height (cells):</label></td>
					<td><input id="n" type="text" required pattern="\d+" value="130"></td>
					<td></td>
					<td><button id="fill2" type="button">Fill Page</button></td>
				</tr>
				<tr>
					<td><label for="color">Grid Color:</label></td>
					<td>
						<input id="color" type="color" value="#ffffff">
						<button id="white" type="button">White</button>
						<button id="black" type="button">Black</button>
					</td>
					<td colspan="4"></td>
				</tr>
			</table>
			<h3>Image</h3>
			<input id="file" type="file">
			<table class="tt">
				<tr>
					<td><button id="browse" type="button">Browse</button></td>
					<td><div id="name">(Select an image)</div></td>
				</tr>
				<tr>
					<td></td>
					<td><img id="preview" alt="(No Preview)" src="#"></td>
				</tr>
			</table>
			<br>
			<button id="generate">Generate</button>
			<button id="reset" type="reset">Reset</button>
			<button id="print" type="button">Print</button>
		</form>
		<div id="footer">
			&copy; 2017-2019 Thejaka Maldeniya. All rights reserved.
		</div>
	</div>
	<div id="page">
		<div id="content"></div>
	</div>
</body>
</html>

最佳答案

减少代码给我指明了如何解决核心问题的方向。结果我省略了 td，因为 FF Desktop 不需要它们，以减少生成代码的大小。在我写这篇文章时，我只是根据要求针对 FF Desktop 进行优化。添加空的 td 似乎解决了核心问题。 (到目前为止仅在 Edge 中进行了测试...)

/*********************************************\
**  Copyright © 2017-2019 Thejaka Maldeniya  **
\*********************************************/
'use strict';
(function (a) {
    a.i()
}(
    {
        z: 0, // image file data URL
        p: '3', // previous value of units (default: Millimeters)
        f: { // functions
            _: function (l, e, h) { l.addEventListener(e, h, 0) },
            l: function (a, f) { // load files
                if (f.length) {
                    f = f[0]
                    var l = a.u.l, r = new FileReader()
                    l.name.innerHTML = f.name
                    a.f._(r, 'loadend', function (e) {
                        l.preview.src = a.z = e.target.result
                    })
                    r.readAsDataURL(f)
                }
            },
            r: function (x) { // round to 3 decimal places
                return Math.round(x * 1000) / 1000
            },
            f: function (a, b) { // get conversion factor
                var f = 0
                if (a == b) f = 1
                else {
                    // if either a or b is not known, factor will be 0
                    // first, convert to Millimeters
                    switch (a) { // previous units value
                        case '1': // Inches
                            f = 25.4
                            break
                        case '2': // Centimeters
                            f = 10
                            break
                        case '3': // Millimeters
                            f = 1
                    }
                    // second, convert from Millimeters
                    switch (b) { // new units value
                        case '1': // Inches
                            f /= 25.4
                            break
                        case '2': // Centimeters
                            f /= 10
                            break
                        case '3': // Millimeters
                            // no change
                    }
                }
                return f
            },
            c: function () { // units or size value changed
                var t = this, l = a.u.l
                , r = t.r // round function
                , width = l.width.value, height = l.height.value // A4
                , mt = l.top.value, mb = l.bottom.value, ml = l.left.value, mr = l.right.value // margins
                , w = l.w.value, h = l.h.value // width, height of cell
                , m = l.m.value, n = l.n.value // width, height of grid
                , s = 'A4' // paper size
                , f = t.f(a.p, a.p = l.units.value) // unit conversion factor
                , g = t.f('3', l.units.value) // unit conversion factor for default values (currently in Millimeters)
                l.width.setAttribute('readonly', '')
                l.height.setAttribute('readonly', '')
                switch (l.size.value) {
                    case '0': // Custom
                        l.width.removeAttribute('readonly')
                        l.height.removeAttribute('readonly')
                        g = f
                        break
                    case '1': // Letter
                        width = 216
                        height = 279
                        l.rotate.checked = 0
                        s = 'Letter'
                        break
                    case '3': // Legal
                        width = 216
                        height = 356
                        l.rotate.checked = 0
                        s = 'Legal'
                        break
                    case '6': // A3
                        width = 297
                        height = 420
                        l.rotate.checked = 0
                        s = 'A3'
                        break
                    case '7': // A4
                        width = 210
                        height = 297
                        l.rotate.checked = 0
                        s = 'A4'
                        break
                    case '8': // A5
                        width = 148
                        height = 210
                        l.rotate.checked = 0
                        s = 'A5'
                }
                l.width.value = r(width * g)
                l.height.value = r(height * g)
                l.top.value = r(mt * f)
                l.bottom.value = r(mb * f)
                l.left.value = r(ml * f)
                l.right.value = r(mr * f)
                l.w.value = r(w * f)
                l.h.value = r(h * f)
                l.m.value = m
                l.n.value = n
            }
        },
        u: {
            l: {
                style: 0,
                ui: 0,
                form: 0,
                units: 0,
                size: 0,
                width: 0,
                height: 0,
                rotate: 0,
                top: 0,
                bottom: 0,
                left: 0,
                right: 0,
                w: 0,
                h: 0,
                square: 0,
                fill1: 0,
                m: 0,
                n: 0,
                fill2: 0,
                color: 0,
                white: 0,
                black: 0,
                file: 0,
                browse: 0,
                name: 0,
                preview: 0,
                reset: 0,
                print: 0,
                page: 0,
                content: 0
            },
            f: {
                b: function (f, c) {
                    return function () {
                        var a = arguments, n = a.length, b = Array(n), i = 0
                        for (; i < n; ++i)
                            b[i] = a[i]
                        f.apply(c, b)
                    }
                }
            },
            e: {
                document: {
                    DOMContentLoaded: function () {
                    }
                },
                window: {
                    load: function () {
                        var a = this, l = a.u.l
                        a.p = l.units.value
                        if (l.size.value == '0') {
                            l.width.removeAttribute('readonly')
                            l.height.removeAttribute('readonly')
                        }
                        if (!l.square.checked)
                            l.h.removeAttribute('readonly')
                    }
                },
                ui: {
                    dragover: function (e) {
                        e.stopPropagation()
                        e.preventDefault()
                        e.dataTransfer.dropEffect = 'copy'
                    },
                    drop: function (e) {
                        e.stopPropagation()
                        e.preventDefault()
                        this.f.l(this, e.dataTransfer.files)
                    }
                },
                rotate: {
                    change: function () {
                        var l = this.u.l, v = l.width.value
                        l.width.value = l.height.value
                        l.height.value = v
                        v = l.top.value
                        if (l.rotate.checked) {
                            l.top.value = l.left.value
                            l.left.value = l.bottom.value
                            l.bottom.value = l.right.value
                            l.right.value = v
                        } else {
                            l.top.value = l.right.value
                            l.right.value = l.bottom.value
                            l.bottom.value = l.left.value
                            l.left.value = v
                        }
                        v = l.w.value
                        l.w.value = l.h.value
                        l.h.value = v
                        v = l.m.value
                        l.m.value = l.n.value
                        l.n.value = v
                    }
                },
                w: {
                    change: function (e) {
                        var l = this.u.l
                        if (l.square.checked)
                            l.h.value = e.target.value
                    }
                },
                square: {
                    change: function (e) {
                        var l = this.u.l
                        if (e.target.checked) {
                            l.h.setAttribute('readonly', '')
                            l.h.value = l.w.value
                        } else l.h.removeAttribute('readonly')
                    }
                },
                file: {
                    change: function (e) {
                        e.stopPropagation()
                        e.preventDefault()
                        this.f.l(this, e.target.files)
                    }
                },
                units: {
                    change: function () {
                        this.f.c(this)
                    }
                },
                size: {
                    change: function () {
                        this.f.c(this)
                    }
                },
                fill1: {
                    click: function () {
                        var l = this.u.l
                        if (l.form.reportValidity()) {
                            l.m.value = (l.width.value - l.left.value - l.right.value) / l.w.value | 0
                            l.n.value = (l.height.value - l.top.value - l.bottom.value) / l.h.value | 0
                        }
                    }
                },
                fill2: {
                    click: function () {
                        var l = this.u.l
                        if (l.form.reportValidity()) {
                            var w = (l.width.value - l.left.value - l.right.value) / l.m.value
                            , h = (l.height.value - l.top.value - l.bottom.value) / l.n.value
                            if (l.square.checked)
                                if (w < h) h = w
                                else w = h
                            l.w.value = w
                            l.h.value = h
                        }
                    }
                },
                white: {
                    click: function () {
                        this.u.l.color.value = '#ffffff'
                    }
                },
                black: {
                    click: function () {
                        this.u.l.color.value = '#000000'
                    }
                },
                browse: {
                    click: function () {
                        this.u.l.file.click()
                    }
                },
                reset: {
                    click: function () {
                        var l = this.u.l
                        l.width.setAttribute('readonly', '')
                        l.height.setAttribute('readonly', '')
                        l.content.innerHTML = l.style.innerHTML = ''
                    }
                },
                print: {
                    click: function () {
                        window.print()
                    }
                },
                form: {
                    submit: function (e) {
                        e.stopPropagation()
                        e.preventDefault()
                        var a = this, l = a.u.l, u = l.units.value
                        , width = l.width.value, height = l.height.value // page size
                        , mt = l.top.value, mb = l.bottom.value // margins
                        , ml = l.left.value, mr = l.right.value // margins
                        , w = l.w.value, h = l.h.value // width, height of cell
                        , m = l.m.value, n = l.n.value // width, height of grid
                        switch (u) {
                            case '1': // Inches
                                u = 'in'
                                break
                            case '2': // Centimeters
                                u = 'cm'
                                break
                            case '3': // Millimeters
                            default: // use Millimeters
                                u = 'mm'
                        }
                        l.style.innerHTML = '@page{size:' + width + u + ' ' + height + u
                        + (l.rotate.checked ? ';landscape' : '')
                        + '}@page{margin:' + mt + u + ' ' + mr + u + ' ' + mb + u + ' ' + ml + u
                        + '}@media screen{#page{width:' + width + u + ';height:' + height + u
                        + '}}#content{width:' + (width - ml - mr) + u + ';height:' + (height - mt - mb) + u
                        + '}#grid>colgroup>col{min-width:' + w + u
                        + '}#grid>tbody>tr{height:' + h + u
                        + '}#grid,#grid>colgroup>col,#grid>tbody>tr{border-color:' + l.color.value
                        + '}'
                        l.content.innerHTML = '<div id="box"><img alt="" id="image" src="' + a.z
                        + '"><table id="grid"><colgroup>'
                        + '<col>'.repeat(m) + '</colgroup>'
                        + ('<tr>' + '<td></td>'.repeat(m) + '</tr>').repeat(n)
                        + '</table></div>'
                    }
                }
            },
            i: function (p) {
                var t = this, l = t.l, b = t.f.b, e = t.e, i, j, k
                for (i in l)
                    l[i] = document.getElementById(l[i] || i)
                l.window = window
                l.document = document
                for (i in e) {
                    k = e[i]
                    for (j in k)
                        l[i].addEventListener(j, b(k[j], p), 0)
                }
            }
        },
        i: function () {
            var t = this
            t.u.i(t)
        }
    }
))

关于javascript - Firefox 与 Chrome、Edge、Safari 之间的渲染差异，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57198124/

上一篇：javascript - 如何在单击时更改元素的类名？ (汉堡菜单)

下一篇：javascript - 如何将宽度从右到左转换而不是默认的从左到右？

相关文章：

css - 无法使用 css 让背景图像与内容一起滚动(背景附件 : scroll)

javascript - 如何清除主干中点击路由器上的javascript全局变量的值

javascript - &lt;input type =“text” maxlength =“4” > 不应将逗号和点计入 maxlength

JavaScript - 将 javascript 对象作为隐藏输入字段发送

javascript - 如何使用php查找手机号码的重复条目

javascript - 当 Div 到达页面底部时停止移动

css - Angular 动态颜色 - SASS

html - 如何处理左侧填充的容器内的边距

javascript - jQuery 选择器速度执行

c# - 如何使用 JQuery 获取母版页中控件的值？

©2024 IT工具网  联系我们