यह देखते हुए कि आईई पूरी तरह से ग्रिड लेआउट का समर्थन नहीं करता है, मैं केवल इंटरनेट एक्सप्लोरर के लिए फ्लेक्सबॉक्स का उपयोग कर रहा हूं, और अन्य ब्राउज़रों के लिए ग्रिड लेआउट का उपयोग कर रहा हूं।

क्या केवल आईई पर फ्लेक्स आइटम्स में मार्जिन/पैडिंग जोड़ने का कोई तरीका है, और क्या यह ग्रिड लेआउट आइटम्स को प्रभावित नहीं करता है?

अभी, फ्लेक्सबॉक्स आइटम के बीच कोई जगह नहीं है - मुझे पता है कि आप सामान्य रूप से ".grid आलेख" में मार्जिन या पैडिंग जोड़ देंगे, लेकिन यह इस मामले में काम नहीं करता है b/c जो ग्रिड आइटम्स में मार्जिन या पैडिंग जोड़ देगा, भी (उदाहरण के लिए क्रोम में ग्रिड लेआउट में)।

.grid {
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  display: grid;
  justify-content: start; 
  margin-top: -20px;

} 


.grid article {
  -ms-flex: 0 0 250px;
}


.grid a {
  display: block;
  text-decoration: none;
  color: inherit;

}



@media (min-width: 800px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  grid-row-gap: 70px;
  grid-column-gap: 40px;
  } 
}

@media (min-width: 600px) and (max-width: 799px) {
  .grid {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-row-gap: 40px;
  grid-column-gap: 30px;
  margin-top: -15px;
  } 

  }    
   <div class="grid> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

   <article> 
    <a href="#">
   <div>Sample content goes here</div> 
    </a>
  </article> 

</div> 
0
user2277916 11 अक्टूबर 2020, 13:13

1 उत्तर

सबसे बढ़िया उत्तर

कृपया इस समस्या को हल करने के लिए निम्न विधियों का उपयोग करने का प्रयास करें:

विधि 1: आप justify जोड़ सकते हैं -सामग्री से .grid तक ताकि IE में प्रत्येक तत्व को रिक्ति बनाए रखने की अनुमति मिल सके। इसका उपयोग मुख्य अक्ष (क्षैतिज अक्ष) दिशा में लोचदार बॉक्स तत्वों के संरेखण को सेट या पुनर्प्राप्त करने के लिए किया जाता है:

.grid {
    display: -ms-flexbox;
    -ms-flex-wrap: wrap;
    display: grid;
    justify-content: start;
    margin-top: -20px;
    justify-content: space-between; /*add this line*/
}

विधि 2: आप नीचे दिए गए CSS में IE को लक्षित करने के लिए मीडिया क्वेरी का उपयोग कर सकते हैं, फिर मीडिया क्वेरी में शैली केवल IE 11 पर लागू होगी और बाहर की शैली निम्न पर लागू होगी सभी ब्राउज़र:

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
/* IE10+ CSS */
    .grid article {
        -ms-flex: 0 0 250px;
        margin-right: 225px;
    }
}

.grid article {
    -ms-flex: 0 0 250px;
}
1
Yu Zhou 12 अक्टूबर 2020, 08:46