मैं सीएसएस का उपयोग करके एक तत्व की भरपाई से कैसे छुटकारा पा सकता हूं?

Question

मैं कुछ तत्वों के साथ एक स्थिति की समस्या है, यह IE8 डेवलपर उपकरण का निरीक्षण करने पर यह मुझे यह दिखाता है:

अब मुझे पूरा यकीन है कि मेरी समस्या 12 ऑफसेट है, लेकिन मैं इसे कैसे निकालूं ? मुझे CSS ऑफसेट प्रॉपर्टी का कोई उल्लेख नहीं मिल रहा है। क्या हमें मार्जिन के अलावा ऑफसेट की आवश्यकता है?

यहाँ यह है कि यह उत्पादन कोड है:

 <div id="wahoo" style="border: solid 1px black; height:100px;">

    <asp:TextBox ID="inputBox" runat="server" />

    <input id="btnDropDown" type="button" style="width:26px; height:26px; background-position: center center; border-left-color: buttonface; background-image: url(Images/WebResource.gif); border-bottom-color: buttonface; border-top-color: buttonface; background-repeat: no-repeat; border-right-color: buttonface;"  tabindex="99" />

    <div id="ListboxWrapper" style="display:none; position:absolute; onfocusout="this.style.display = 'none'"">
       <asp:ListBox ID="lstBoxCompany" runat="server" AutoPostBack="True" OnSelectedIndexChanged="lstBoxCompany_SelectedIndexChanged" style="z-index: 100;" Width="300px" />               
    </div>

</div>

ऑफसेट वाला तत्व है inputBox

Comments

क्या आपका तत्व तैनात है? जाँच करें leftऔर topगुण।

— jessegavin

थोड़ा कोड यहां बहुत उपयोगी होगा। CSS में कोई 'ऑफसेट' नियम नहीं है, लेकिन IE में यादृच्छिक स्थानों में यादृच्छिक पिक्सेल जोड़ने की प्रवृत्ति है। यह आमतौर पर फ़्लोट्स और पोज़िशनिंग के साथ किया जाता है

— एलेक्स

मुझे लगता है कि 'ऑफसेट' अन्य तत्वों से संबंधित 'पिक्सल' है - जैसे कि पिछले तत्व पर मार्जिन इस एक को नीचे धकेलता है। मुझे पता लगाने के लिए अब IE देव उपकरणों के साथ प्रयोग करने का समय नहीं है।

— क्वेंटिन

मैंने इनलाइन CSS के साथ कोड पूरा जोड़ दिया है ताकि हम देख सकें कि क्या चल रहा है

— m.edmondson

क्या कोई वेब-पेज उदाहरण है जिसे हम इस पर देख सकते हैं - उदाहरण के लिए इसलिए हम इस पर फ़ायरबग को इंगित कर सकते हैं और व्यापक पृष्ठ को समझ सकते हैं। ईजी आपके इनपुट कंट्रोल को एक अन्य सीएसएस परिभाषा से मार्जिन या पैडिंग विरासत में मिली है?

— क्रिस्च C

Answer 1

यह ऑफसेट मूल रूप से x, y स्थिति है जिसे ब्राउज़र ने स्थिति सीएसएस विशेषता के आधार पर तत्व के लिए गणना की है। इसलिए यदि आप <br>इसे या किसी अन्य तत्व से पहले रखते हैं, तो यह ऑफसेट को बदल देगा। उदाहरण के लिए, आप इसे 0 से सेट कर सकते हैं:

#inputBox{position:absolute;top:0px;left:0px;}

या

#inputBox{position:relative;top:-12px;left:-2px;}

इसलिए, आपके पास जो भी स्थिति है, वह जरूरी नहीं कि ऑफसेट के साथ एक मुद्दा है, हालांकि आप इसे हमेशा शीर्ष, बाएं, दाएं और नीचे की विशेषताओं के साथ खेलकर ठीक कर सकते हैं।

क्या आपकी समस्या ब्राउज़र असंगतता है?

Comments

कृपया ऊर्ध्वाधर-संरेखित के बारे में स्टोनी की टिप्पणी देखें। संरेखण सेटिंग को ठीक करना तत्व के ब्राउज़र की स्थिति को जबरन ओवरराइड करने के लिए बेहतर लगता है।

— जेरेमी कोंडिट

Answer 2

मेरे लिए, यह vertical-align: baselineबनाम vertical-align: topथा जो शीर्ष ऑफसेट का कारण बन रहा था।

सेट करने का प्रयास करें vertical-align: top

Comments

यह पूर्ण स्थिति का उपयोग कर से बेहतर है

— user1

आपका उत्तर भयानक है, तथ्य यह है कि मुझे ऊर्ध्वाधर संरेखित करना है जब मेरे पास 4 इनलाइन-ब्लॉक divs हैं जो संरेखित करने से इनकार करते हैं बैल। आपने काम के घंटे खत्म कर दिए। धन्यवाद।

— कोरी ओगबर्न

<button>एक <li>तत्व में एम्बेडेड के साथ काम किया ।

— अम्सीहेल

Answer 3

जल्दी ठीक:

position: relative;
top: -12px;
left: -2px;

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

शब्दावली का सवाल है, left, right, topऔर bottomसीएसएस हैं ऑफसेट गुण। वे एक विशिष्ट स्थान पर तत्वों की स्थिति के लिए उपयोग किए जाते हैं (जब उपयोग absoluteया fixedस्थिति के साथ ), या उन्हें अपने डिफ़ॉल्ट स्थान के सापेक्ष स्थानांतरित करने के लिए (जब relativeस्थिति के साथ उपयोग किया जाता है )। दूसरी ओर मार्जिन बक्से के बीच अंतराल को निर्दिष्ट करते हैं और वे कभी-कभी ढह जाते हैं, इसलिए उन्हें मज़बूती से ऑफ़सेट के रूप में उपयोग नहीं किया जा सकता है।

लेकिन ध्यान दें कि आपके मामले में ऑफसेट को सीएसएस ऑफ़सेट्स से गणना (केवल) नहीं किया जा सकता है।

Comments

वह बस व्हाट्सएप को तत्व के दूसरी तरफ ले जाता है।

— क्वेंटिन

@ डेविड व्हाट्सएप? और लक्षित बॉक्स के अलावा कुछ भी क्यों स्थानांतरित किया जाएगा?

— अलीन पुरकारू

व्हॉट्सएप वो स्पेस है जिसमें कुछ भी नहीं है। लक्षित बॉक्स के अलावा अन्य चीजों को स्थानांतरित नहीं किया जाएगा, यह बात है। यदि आपके पास नीचे कुछ 1px है, और आप 12px ऊपर जाते हैं, तो यह 1px के बजाय 13px नीचे है।

— क्वेंटिन

@ डेविड हमारे पास व्हॉट्सएप की समान परिभाषा नहीं हो सकती है, लेकिन मुझे वही मिलता है जो आप कहना चाहते हैं। मैं सहमत हूं कि अंतर को दूसरी तरफ ले जाया जाएगा। मैंने समाधान को "त्वरित सुधार" कहा क्योंकि यह प्रयोग करने योग्य हो सकता है या नहीं। यह केवल एक चीज है जिसे मैं सुझाव दे सकता हूं जब तक कि पूछने वाला अधिक विवरण प्रदान नहीं करता है।

— १५:०५ पर अलीन पुरकारू २ '

Answer 4

नकारात्मक मानों के लिए शीर्ष और बाएं गुणों को सेट करना एक अच्छा समाधान नहीं हो सकता है यदि आपकी समस्या बस यह है कि आप quirks मोड में हैं। यह तब हो सकता है जब पृष्ठ एक <!DOCTYPE>घोषणा को याद कर रहा है, जिससे इसे IE8 में quirks मोड में प्रदान किया जा सकता है। IE8 डेवलपर टूल्स में, सुनिश्चित करें कि "डॉक्यूमेंट मोड" के तहत "क्वर्क्स मोड" का चयन नहीं किया गया है। यदि इसे चुना जाता है, तो आपको उचित <!DOCTYPE>घोषणा को जोड़ने की आवश्यकता हो सकती है ।

Answer 5

यदि आप IE डेवलपर टूल का उपयोग कर रहे हैं, तो सुनिश्चित करें कि आपने गलती से उन्हें पुरानी सेटिंग पर नहीं छोड़ा है। मैं अपने आप को इसी मुद्दे के साथ पागल बना रहा था जब तक कि मैंने नहीं देखा कि यह इंटरनेट एक्सप्लोरर 7 मानकों पर सेट था। इसे Internet Explorer 9 मानकों में बदल दिया और सब कुछ सही जगह पर तड़क गया।

Comments

हममें से कुछ के पास IE7 पर अभी भी उपयोगकर्ता हैं।

— 15ee8f99-57ff-4f92-890c-b56153

Answer 6

मूविंग एलिमेंट टॉप: -12px या पोजिशनिंग यह समस्या को पूरी तरह से हल नहीं करता है बल्कि इसे मास्क करता है

मुझे एक ही समस्या थी - जाँच करें कि क्या आपके पास एक रैपिंग एलिमेंट मिला हुआ है: फ़्लोटिंग एलीमेंट्स फ़्लोटिंग फ़्लोटिंग नॉन - फ़्लोटिंग एलिमेंट के कारण यह अजीब फ़्लोटिंग फ़्लोटिंग के कारण हुआ

Comments

मेरे मामले में मैं एक प्रोटोटाइप के साथ एक वेबसाइट के लुक से मेल खाना चाह रहा था। मेरे पास प्रोटोटाइप के समान इनलाइन-ब्लॉक डिव की एक पंक्ति थी, लेकिन मेरे ऑफ़सेट 4 से बंद थे। मुझे पता चला कि मेरे पास वेबसाइट पर फ़्लोटिंग डिव और नॉन-फ़्लोटिंग का मिश्रण था। उन सभी को तैरने से अतिरिक्त ऑफसेट हटा दिया गया। यह विशेष रूप से हैरान करने वाला था क्योंकि मैं सीएसएस के बीच बहुत अधिक अंतर नहीं देख सकता था।

— क्लिंट ब्राउन

Answer 7

तत्व के लिए मार्जिन और पैडिंग को परिभाषित करना समस्या का सामना कर रहा है:

#element_id {margin: 0; padding: 0}  

और देखें कि क्या समस्या मौजूद है। IE पृष्ठ को अधिक अवांछित वंशानुक्रम के साथ प्रस्तुत करता है। आपको ऐसा करने से रोकना चाहिए।

Answer 8

यह अजीब लगता है, लेकिन आप इनपुट vertical-align: topके CSSलिए सेटिंग की कोशिश कर सकते हैं। वह इसे IE8 में ठीक करता है, कम से कम।

Answer 9

हमारे पास हमारी .NET आधारित वेबसाइट पर एक ही मुद्दा था, DotNetNuke (DNN) पर चल रहा था और मेरे लिए इसे हल करना मूल रूप से फॉर्म टैग का एक साधारण मार्जिन रीसेट था। .NET आधारित वेबसाइटें अक्सर एक फॉर्म में लपेटी जाती हैं और मार्जिन को रीसेट किए बिना आप कभी-कभी दिखने वाली अजीब ऑफसेट देख सकते हैं, ज्यादातर जब कुछ स्क्रिप्ट शामिल होती हैं।

इसलिए यदि आप अपनी साइट पर इस समस्या को ठीक करने का प्रयास कर रहे हैं, तो इसे अपनी CSS फ़ाइल में दर्ज करने का प्रयास करें:

form {
  margin: 0;
}

Comments

मेरे पास एक ही मुद्दा था और फॉर्म मार्जिन को बदलना भी मेरे लिए काम कर रहा था।

— डेविड डारमन

Answer 10

आप उन 'चूक' से छुटकारा पाने के लिए एक रीसेट सीएसएस लागू कर सकते हैं। यहाँ एक रीसेट css http://meyerweb.com/eric/tools/css/reset/ का उदाहरण दिया गया है । बस अपनी खुद की शैलियों से पहले रीसेट शैलियों को लागू करें।

Answer 11

मुझे भी यही समस्या थी। UpdatePanel ताज़ा करने के बाद ऑफ़सेट दिखाई दिए। समाधान इस तरह UpdatePanel से पहले एक खाली टैग जोड़ने के लिए किया गया था:

<div></div>

...

Comments

UpdatePanel एक ASP.NET चीज़ है, है ना? क्योंकि यह ASP.NET प्रश्न नहीं लगता है।

— जोबेल

वास्तव में यदि आप प्रश्न में कोड स्निपेट देखते हैं तो आप देखेंगे कि यह ASP.NET प्रश्न है।

— मितकोब

आह। क्षमा करें, बस स्किम्ड, एस्प को ध्यान नहीं दिया: टेक्स्टबॉक्स। FWIW, समस्या ASP.NET समस्या नहीं है । जब यह समस्या दिखाई देती है, तो आमतौर पर इसका क्या अर्थ है कि प्रश्न में ऑफसेट किसी अन्य तत्व के बड़े होने के कारण है, और यदि यह खराब लेआउट के परिणामस्वरूप है, तो कुंजी सामान्य रूप से कुछ अन्य तत्व पर मार्जिन, पैडिंग या सीमा को कम करने के लिए है। वही माता-पिता।

— जो मैबल

Answer 12

बस इस तरह से कोई भी रूपरेखा निर्धारित करें

[पहचानकर्ता] {रूपरेखा: कोई नहीं; }

Answer 13

मेरे मामले में ऑफसेट को एक ली के भीतर ग्रिड लेआउट के साथ एक कस्टम तत्व में जोड़ा गया था, जबकि उल एक ऊर्ध्वाधर फ्लेक्सबॉक्स था।

सुंदर सरल उपाय यह था कि ली को ब्लॉक तत्व के रूप में परिभाषित किया जाए

li {
 display: block;
}

और ऑफसेट हो गया था