स्थिति: पूर्ण एक घंटा तत्व 100% से अधिक विस्तृत

Question

FX और IE निम्नलिखित कोड दो बार बना देता है में बना देता है, लेकिन नीले एक ब्राउज़र स्क्रीन की तुलना में थोड़ा व्यापक है। कोई भी आकार बाईं ओर नीली बार ऑफस्क्रीन की पूंछ के साथ एक क्षैतिज स्क्रॉलबार छोड़ देगा। यह एक बहुत बड़े पृष्ठ से उबला हुआ है और मैं स्थिति को हटा नहीं सकता: मूल में पूर्ण तत्व। क्या कोई यह पता लगा सकता है कि ब्लू बार को केवल 100% चौड़ा बनाने के लिए कैसे, यह लाल से मेल खाता है और क्षैतिज स्क्रॉलबार का कारण नहीं बनता है? इस व्यवहार के पीछे क्या कोई विचार है? मैं उलझन में हूं। बहुत बहुत धन्यवाद।

<hr style="border:1px solid red; width:100%;"/> 
 
<hr style="position:absolute; border:1px solid blue; width:100%;" />

Answer 1

सीधे शब्दों में

:

body {position:relative;} 

डेमोhttp://jsfiddle.net/qyvtzyfh/

कारण:

तत्व पर बहुत ही सरल सरलीकृत विवरण में position:absolute; और width:100%; तत्व पर स्पष्ट रूप से परिभाषित position:relative; या position:absolute; के साथ तत्काल माता-पिता के सापेक्ष तत्व की चौड़ाई बनाते हैं, क्योंकि आपके पास यह नहीं है, इसलिए इसकी चौड़ाई हो जाती है प्रारंभिक धारक ब्लॉक, body के बजाय (जो html रूप में अच्छी तरह से तत्व शामिल है) जोड़ने position:relative;body करने के लिए आप body के तत्व रिश्तेदार की चौड़ाई बनाने के (अपनी स्थिति के अलावा) से।