फ़ायरफ़ॉक्स में ज़ूमिंग

Question

को तोड़ने के लिए पृष्ठ लेआउट का कारण बनता है मुझे इस पृष्ठ के साथ समस्या हो रही है: http://seatgeek.com/atlanta-hawks-tickets/। यदि आप फ़ायरफ़ॉक्स में "सामान्य" सेटिंग से एक स्तर ज़ूम करते हैं, तो पृष्ठ इस तरह दिखता है: । यह एफएफ के दोनों संस्करण 3.6 और 4.0 के साथ होता है। यह वेबकिट के साथ नहीं होता है।

स्पष्ट रूप से समस्या "list_details" div के तत्वों में निहित है। समस्या को 1px द्वारा "col1" या "col2" spans की चौड़ाई को कम करके या "vevent" li तत्व को 1px तक बढ़ाकर तय किया जा सकता है, लेकिन ये फ़िक्स डिज़ाइन को अनुचित रूप से प्रस्तुत करने का कारण बनते हैं।

यदि आप "col1" और "col2" की चौड़ाई जोड़ते हैं, तो उनके क्षैतिज पैडिंग और सीमा को ध्यान में रखते हुए, कुल चौड़ाई 647 पीएक्स है। लेकिन यह केवल फ़ायरफ़ॉक्स में ठीक से प्रदर्शित होता है (जब एक स्तर ज़ूम आउट किया जाता है) जब "vevent" तत्व, जिसमें दो होते हैं, की चौड़ाई 648 पीएक्स होती है। ऐसा क्यों है?

Answer 1

निम्नलिखित सीएसएस से margin-right को हटाने के मुद्दे जूम बाहर तय

#left_container .search_details .list_details { 
    margin-right: 1px; 
} 

Answer 2

इस रूप में टकरा गया प्रतीत होता है, लेकिन मूल कोड उपलब्ध नहीं है, मैं कह सकता हूँ कि अंतर होता की वजह से किया गया है राउंडिंग (या उप पिक्सल), ओपी ने कहा कि समस्या तब नहीं हुई जब div 648px चौड़ा था .. एक भी संख्या को घटाया जा सकता है, या 2 कॉलम के बीच विभाजित किया जा सकता है (ओपी भी 2 कॉलम का उल्लेख करता है) ज़ूम स्तर से कोई फर्क नहीं पड़ता

हालांकि विषम संख्या 647px का अलग-अलग व्यवहार किया जाएगा y फ़ायरफ़ॉक्स

मैं नहीं कह सकता बिल्कुल के रूप में मैं अब दो कॉलम की चौड़ाई है, लेकिन जॉन Resig द्वारा इस ब्लॉग पोस्ट देख सकते हैं कि, बेहतर

Sub-Pixel Problems in CSS

एक संभव समाधान समझा जा सकता है, या कम से कम से कम एक सहायक, यह सुनिश्चित करना है कि कंटेनर की उपलब्ध चौड़ाई कॉलम की संख्या से हमेशा विभाजित हो?

Answer 3

निम्नलिखित सीएसएस में margin-right:-1px जोड़ें। यह ज़ूम आउट समस्या को ठीक कर सकता है।

.team-show .static-sidebar { 
    line-height: 22px; 
    margin-right: -1px; 
    position: relative; 
    width: 255px; 
}