ამ პოსტის დაწერა ფორუმის ამ პოსტმა გადამაწყვეტინა(ანუ პოსტი არის inspired by Rocko 
) , რადგან არ მინდა ეს საკითხი მილიონობით ფორუმის პოსტში დაიკარგოს. ეს არის მარტივი თუმცა სასარგებლო გამოსავალი IE – სთვის დამახასიათებელი პრობლემისგან.
თავისთავად პრობლემის არსი ძალიან მარტივია, ეს არის IE – ს რენდერინგის მორიგი ბაგი რომელიც გხვდება კონკრეტულად img ტეგთან მუშაობის დროს. თუ img ელემენტს განვათავსებთ div ან td ტეგში მას ქვედა მხარეს უჩნდება პატარა სივრცე, თუ სურათის კონტეინერს აქვს მითითებული ფონის ფერი მაშინ ეს ხარვეზი ბევრად უფრო თვალსაჩინო ხდება.
მაგალითი:
თუ ამ კოდს ვნახავთ IE – ში დავინახავთ რომ სურათის ქვეშ არის გარკვეული სივრცე.
სურათი 1:
თუმცა გამოსავალი ამ პრობლემიდან არსებობს.
გამოსავალი 1:
ამ შემთხვევაში პრობლემა იხსნება თუ კოდს დავწერთ ერთ სტრიქონზე… მაგრამ თავისთავად ცხადია რომ ეს არ არის გამოსავალი…
ნაცვლად ამისა შეგვიძლია პრობლემა გადავჭრათ img ელემენტის css – ით დამუშავებით თუ მას მივუთითებთ display: block;
გამოსავალი 2:
1 2 3 |
სურათი 2:
რაში მდგომარეობს პრობლემა? პრობლემა არის ის რომ img ელემენტის ნაგულისხმევი მნიშვნელობა display თვისებისათვის არის inline რის გამოც IE ამ ელემენტს აღიქვავს როგორც ტექსტს. ხოლო ელემენტს ქვედა მხრიდან სივრცეს უკეთებს იმის გამო რომ ეს სივრცე საჭიროა ისეთი ტიპის სიმბოლოებისათვის როგორიცაა: y, p, g…
გამომდინარე აქედან ელემენტისათვის display: block; – ის მითითების შემთხვევაში IE არ დაამუშავებს მას როგორც ტექსტს და თავისთავად სივრცის პრობლემაც ქრება.
თუმცა ყოველთვის რომ არ ვუთითოთ ელემენტს ეს სტილი, ამის გაკეთება შეგვიძლია ყველა ელემენტისათვის ერთხელ CSS ფაილში:
1 2 3 | img { display: block; } |
რაც სამუდამოდ მოაგვარებს ამ პრობლემას.
ჩემთვის პატივია
P.S. კიდევ ერთხელ დიდი მადლობა სოლუშენისთვის
სოლუშენისთვის არაფრის
პატივი რა, შენ წამოჭერი ეს საკითხი და… ნამდვილად არ მომსვლია თავში აზრად აქ დაპოსტვა აქამდე და პირიქით დიდი მადლობა მაგ თემისთვის.. ერთ სტრიქონზე დაწერილი მარკაპის სოლუშენი რომ დავინახე ჩემი თავი გამახსენდა რამდენიმე წლის წინ როდესაც მაგ პრობლემას გაცოფებული ვებრძოდი
ძალიან დიდი მადლობა
მეც მინდა რო ჩემთვისაც მალე გავიდეს ეგ რამდენიმე წელი