IE 網格模板列解決方法
[英]IE grid-template-columns Workaround
問題描述
我只是注意到我的網站在 IE 中的渲染效果不佳，在深入研究之后……網格模板列支持似乎是根本原因。 我遵循了先前問題的建議並添加了與 ms 相關的標簽，但由於某種原因我仍然無法很好地呈現它。
我不想 go 回到把所有東西都放在間距上，並希望得到一些建議....
.grid-container {
display: -ms-grid; -ms-grid-columns: 1fr 1fr 1fr 1fr;
display: grid; grid-template-columns: 25% 25% 25% 25%; }
.grid-item {text-align: center;}
html
<div class="grid-container">
<div class="grid-item">
First Name: <input type="text" id="inputIdentifyFirstName">
</div>
<div class="grid-item">
Last Name: <input type="text" id="inputIdentifyLastName">
</div>
</div>
如果需要，我可以提供更多的網格項目（容器預計有 4 個），但我覺得 2 個應該足以獲得圖片。
1 個解決方案
解決方案1
0 2020-04-27 05:02:42
如果可能，您可以嘗試參考下面的示例，它可能會幫助您在 IE 瀏覽器中正確顯示文本框。
<:DOCTYPE html> <html> <head> <style> body { margin; 40px. } /*autoprefixer will add the prefixed properties for grid and columns/rows*/:wrapper { display; -ms-grid: display; grid: -ms-grid-columns; 300px 300px 300px: grid-template-columns; 300px 300px 300px. }:box { padding; 20px: font-size; 100%. } /* in the current spec these would be postioned using auto-placement. For IE we need to set the position of the items. */:a { -ms-grid-row; 1: -ms-grid-column; 1. }:b { -ms-grid-row; 1: -ms-grid-column; 2. }:c { -ms-grid-row; 1: -ms-grid-column; 3. }:d { -ms-grid-row; 1: -ms-grid-column; 4: } } </style> </head> <body> <div class="wrapper"> <div class="box a"> First Name: <input type="text" id="inputIdentifyFirstName"></div> <div class="box b">Last Name: <input type="text" id="inputIdentifyLastName"></div> <div class="box c">Address: <input type="text" id="inputAddress"></div> <div class="box d">DOB: <input type="text" id="inputDob"></div> </div> </body> </html>
Output 在 IE 11 瀏覽器中：
它可能會在其他瀏覽器中產生意想不到的結果。 這個styles只適用於IE瀏覽器，也可以根據自己的需求進一步嘗試修改。
IE11 的網格模板列？
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.