测试:
问题:
vw
单位设置字体大小。vw
单位设置图片大小。问题:
屏幕截图示例(注意未对齐的边框):
在Edge(Win 10)和Firefox 57.0(64位)(Ubuntu 14.04和16.04)中正常工作
示例:
td {
font-size: 2vw;
border: 1px solid #ddd;
line-height: 2;
padding: 8px;
}
table {
border-collapse: collapse;
}
.github {
height: 3.8vw;
width: 7.2vw;
}
.bitbucket {
height: 7.2vw;
width: 7.2vw;
}
.gitlab {
height: 5.3vw;
width: 15.1vw;
}

<table>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>
<img class="github" src="data:image/png;base64,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"/>
</td>
<td>3</td>
</tr>
<tr>
<td>
<img class="gitlab" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJcAAAA1CAMAAAB7lYmuAAAAyVBMVEX////iQyn8bSb8oyaIjpqFi5fhQCnhORrw8fLum5Lb3eCBh5TyYjDX2dz8nAD8aiW4u8LS09ijqLD4+Pnm5+mZnqjiPiLGyc78oRv8pyi+wcetsbjhMw7uXTD8nC6QlqDmUDH6by7skojmZ1b65+XgKwD31NDxsqz8gS7+4MD8ei38t2L+7t79w4H8iDD8lC/906b/+PD8sVP8rUj+2bX9vnb9zJb+6dL+ex3zYBTsTxr80rb5vJn8qDjocmPkVUD1kmjyjXfvp6C9VOnyAAAEr0lEQVRYhcWY63raOBCG7UgyLgLjIxg7nNJAW0KTpuTQ7Talu/d/UTuSfJCMbfHsQ8z8aGIzRm/m+2Yk1zCK+H1jaOPTx0CfdN7YrNe32qTe+t8OUJS46fW0a26ux4cuWOQ4jMcfdTk3PfNaX9SzxmZt6tc0IedTJzhFQCnMa42QjF1f1PPGNdRCZx7Gbp7QHWcMVgrtmmOzcyF5Kcz2jtywmnYs5GGsX1Owm70OhRQyajrykOV0KGRWitY1c/YuhRyb+jVzdnPd2R6ZlwLWfGxMytk7FPJDT7+m6MZuhTyM9WsWMnbXkbeFjC1rlux6IYMwDM9gwlLG5jU3Evv4dyvUZEEJITQasiuPUht+UDoRn9qUDhsepNRTb5imfk2ZvbUj+5hgoCLwbwRpQ8GFScFF+k1cROW6XVtSNKwpp1gtQnoUk7RvB3bfJT5ch8mEfSHGJ3BhlevXz4Ec/3yoiRslZfCnCcsmGIf573Z5//9w7T+PrqQY9WpioGRs46Yxl2KqLmt7nqhX6nle/4grTPzIT+yMaxgkvp9mf9fOQVsFbGkex0pOuJo7T/VYAcWpeif31wJTSv0KVxhBg0CFxS14dgEXmIqveIkRUladWUdYS6VccxTf1XMNSVUluMO5sJ8k7qTCFdHInUxSQGE1pcDup3BFXPbhG0JoLhdsdcRlyTKO7qcIOfVCuhjb6p2Cq85fthgZHuGdSHHEUoMIs0dARoSm9zLYkZCWJOPoM2Ah50stV4oXfD3XTdwkmei48sA44VwCMyQsmckIYLL3Z20yrlh6k5C+4ArZYMV8TpzEtcCuIfVjxEy651wIbZuFVGSci/T6jszqFfoQC3wCV9/1o8ivcPnwJJeRh1SwqpCljKOHqciuFxL8VYxlX88VsH6EVsVVrsj4lnNNH0qwipCljNzzol7PdVzg4HyqnsIVwW07qNHRN+7ivF6S91UhSxmF57OC1XHZlK9wIleYk6hcAbssudC0HK8N3bhCqJ3LED1+IpeXJ6tcIRsbu7gEK8frrFbG0VzCqp/40OMLu4Yr4hdVrlx1lSviJn38Xji/HK+ykIWMhefBXWhXiwXOpzCM4FBo9yNwb8HlYpIEggsn/SGPAH6PAKwfkYyLTTHbh1T+VYX1Je/LHbmqeh45XxuoICZsv4O9kJ2/Si6b7XuE748LTHjAvukTnopdvvOwfQiexTQrrfE6zbUsvD87knG0LVqxYdhnYafsVEjpwmUiZedV2KIpyfbtLCh8nLJM3w4p44KzCLstn3aei2mReb8UMpex8LzzvfldLgs439un3TSUF4Hj94IvTl6yakdm3Vh43vmmozprFPbPvD9TZcw9H781Gf7d4sWRvZ8Lac3kgerUTvl3jt2bfLSQuzHzfBy3Gv79QthfeD87tQoZTzX8e8WTmP6sRgOr6EbheeflUlQQj3sn937RjdzzMXq9IJYh7M/H6yyTkXv+IoZX4xVqw7zPOpJ145YZvuG9rNu4c9B0xYUEGcFczv5ihlfjyYnnXMglmOuyhldjt3ceRgPLmo3uL254NV6c+yvLWm2dhjfri8Vr/GO5vGr6j4hLxvNfPy834dvi718XW/o/oYBlJzxJPMYAAAAASUVORK5CYII=" />
</td>
<td>2</td>
<td>
<img class="bitbucket" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AAABuCAMAAADxhdbJAAAAbFBMVEUgUIH///8ARHocToAYTH8AQnkAN3MTSn4APHYKR3z5+vzy9PcAPncANXIAQHgAOXSsucrq7vK1wM9ziKbN1d9DZ5Bee504X4tqg6OHmrOdrMDV2+Tj5+2/ydaRornc4eh/k68AMHBQcJYpV4at4gvqAAAEtElEQVRoge2Z2YKjIBBFHRYRtxgV16hp/f9/HDCbCyYp6Xkaz1O6Y7gCl6oCLOvg4ODg4OBgDSZPMP6HKpw6duBYos+yQpJlvRhoYDuUs9/VZdQO86KN0ov7Z47rntOoSgS3KfsVSYICnET1UmfJJS7zICRmWhjZfXT+oPTEiwuf7u8j9ofK+1brTizsnV2keQPUGukyZ0cPCY2WY1XHVVn0A6HUl1CE874oq3g1r+nAwWrDbMrqKiOBE3I2WWtYLUHGQ+fHyqp0JpgB9fAweWWvtU7o3Yxggk6snL5fxkByfj3pGUPf/ISHk6l2Q8j84XzypqX/3Y+4mPzoCukeyaYWySj//K4kzCcj8qeCzB6evqi0WpJTuh0Y5dSFuI9mBi1BcnThbbeOEjEQRCninDGVDhhjnKMQcUtkbboMPRlosZ900cS71E1UlVeVDVRWSK5y1aWdNshZoKUe1ro2ANgQNQstQwqQ7ks33+GlmVz81VJ9QnozOdA6UJjJFbAgZlFoopszAHMQNbKmi4ByKDaR60KYmsVbE7mGAuVmQRpMBVsHKlWbyEGNKSfvjTXPMnTG3Rs5qDGl3KY14zyQeYEGpNp6woVXm3TDmmfxrOso23ilDuqUTWtepjUStvWVaAN1ylbU9G5lBOacjB9+tDPYgutMWfrpGipUQxjl17LnZPMpWCq/yXFNlu4C1e9hHMJaKLeHusSY76jaUbpuR5Vz2Lrc/nAFWZSIjxHfs9Vb7REkapBeiT5VI/uzXp813CnSmtdVO+6P/D9+DbIaNH89CMBUfkNjzXMwN4eyRLhenzuMqdDKWZPNSi/l6Hrp7TCm7Aa7rBpScvwZSjz1mL1eefCIqdBYs5cNseI5aGqOTusx2Ldb1lgzUsEQ3cNbrCIMS1YPpXucorfm2BLKmsslTcbPmrGM9snpomY8FuMEEYxG+9H1K8E2Py9mG+YHV+f23X0AxPqJ0a975DTWlO9uv3znZ7rDpH3G3Ep5jeWMyYdQR5vOdyS7e/d0UVoSFwMNcRZpz8k82M5upsf1em84DybHcP5m+aOneXv+8hmaAzp4yRwjMUuVP/2Xgl2x97BvBnGG6uOZpheJE7h0XoNUYMQoEG26fWDbVf1p3GIx6EZrSdTeJh9zxxfXKj17E9XxJLrs6f2ADodJI0z0SKEqrkcJjhnybTqIPkskWS9yrs7ZbxWnHAJVoe2Mz3e5MUpHOZ2Wzng8MWLqGuHVFUytVhVJO+PzvZFhrLPcWPB3p3CY0/x+ar0zPt9Bj3TWtXmIiE6S8HBIHmvF21PRvpgUPm7d9jJWInU+fIMwTqnVl+mr1Oy+OIp8wyIpeF3TXpVH8iHPpWPauJ6vyAZ6BjBHv0V3PYXum9bEmGoL8Ok2Zg58Uz6XI7qMvolrtMolDijjnU1vuRAo4aWmCehVM38D+PhmCRYQrxg6RYIAXnHNYopCU7pvEpkt8hHtZl9LappcR/TV65rG4CJ0it9/MX9eYv+OmoycQfLufE9ybh2TvLqEBWL7htmLs+A3xRQY2fk16par8BK34mR6X76hyOgpGPqkbCtJWyZZ7gTf3O2ZaJLxIg2pizVtMXFwcHBwcPDf8xcvFEJFzQ2CfAAAAABJRU5ErkJggg==" />
</td>
</tr>
</tbody>
</table>
&#13;
答案 0 :(得分:0)
这里你有两件事
第一个vw在每个浏览器上都不一样(某些浏览器认为可能有水平或垂直滚动条并从vw中减去滚动条),我建议你不要使用它,至少现在不行。< / p>
第二,每个html表在每个浏览器上都有不同的渲染方式,因此不要更改 line-height 等特定内容
我希望这可以帮到你
答案 1 :(得分:0)
这是Chrome本身的一个错误。
我在铬项目中签了一张票:
https://bugs.chromium.org/p/chromium/issues/detail?id=789745#c3
它已被复制并分配用于进一步的行动。等待即将发布的版本中的解决方案。