2011-09-23 12 views
24

मैं इस धारणा के तहत हूं कि सफारी, क्रोम और फ़ायरफ़ॉक्स जैसे ब्राउज़र में उपयोगकर्ता एजेंट स्टाइलशीट कुछ ऐसा है जो ब्राउज़र के लिए आंतरिक है और सीधे संशोधित नहीं किया जा सकता है (बल्कि स्टाइल प्रॉपर्टी को ओवरराइड करने की आवश्यकता है)।बॉक्स उपयोगकर्ता आकार के लिए "सामग्री-बॉक्स" के बजाय "उपयोगकर्ता-एजेंट स्टाइलशीट" का उपयोग करने के लिए "सामग्री-बॉक्स" का क्या कारण बनता है?

मैं मोज़िला समेत विभिन्न वेबसाइटों के कारण इंप्रेशन के तहत भी हूं कि का डिफ़ॉल्ट मान बॉक्स-साइजिंग वेबकिट और मोज़िला के लिए संपत्ति "सामग्री-बॉक्स" है।

मैंने विभिन्न ब्राउज़रों में देखे गए एक साधारण डमी पेज पर इसका परीक्षण किया।

मेरी समस्या यह है कि हमारे उत्पादन अनुप्रयोग में दो पृष्ठों पर डिफ़ॉल्ट संपत्ति अलग है, और हम यह नहीं समझ सकते कि यह क्यों है।

एक पृष्ठ जो हम वेब इंस्पेक्टर या कंसोल में "सीमा-बॉक्स" की बॉक्स-आकार वाली संपत्ति देखते हैं। यह सीएसएस चयनकर्ता इनपुट को असाइन किया गया है: नहीं ([प्रकार = "छवि"]), textarea

दूसरे पृष्ठ पर वेब इंस्पेक्टर या कंसोल में बॉक्स आकार देने वाली संपत्ति का कोई उल्लेख नहीं है।

क्या किसी को पता है कि किसी विशेष पृष्ठ के लिए उपयोगकर्ता एजेंट स्टाइलशीट में बॉक्स-आकार की परिभाषा को सीधे प्रभावित करने का कोई तरीका है? शायद एक पुस्तकालय है जो यह करता है? हम आवेदन में prototype.js और swfobject.js उपयोग कर रहे हैं ...

अद्यतन: मामले में मैं अपने वेब आवेदन में और हर "डमी" पेज मैंने लगभग हर पृष्ठ पर स्पष्ट नहीं था बॉक्स आकार देने वाली संपत्ति पर परीक्षण डिफ़ॉल्ट "सामग्री-बॉक्स" मान है। किसी कारण से मेरे वेब एप्लिकेशन में एक विशेष पृष्ठ वेब इंस्पेक्टर में दिखाता है कि उपयोगकर्ता एजेंट स्टाइलशीट (ब्राउज़र द्वारा इसके डिफ़ॉल्ट के लिए उपयोग किया जाता है) ने उस संपत्ति को "सीमा-बॉक्स" पर सेट कर दिया है। मैं अपने जीवन के लिए यह नहीं समझ सकता कि यह क्यों है। मैं कुछ भी ढूंढ रहा हूं जो फ़ायरफ़ॉक्स को उस संपत्ति के लिए अपना डिफ़ॉल्ट मान बदलने के कारण कर सकता है।

उत्तर

2

नहीं, आप ब्राउज़र डिफ़ॉल्ट स्टाइलशीट को स्पर्श नहीं कर सकते हैं, और हां, ब्राउज़र के फॉर्म फ़ील्ड के संबंध में विशेष रूप से बॉक्स-साइजिंग के लिए अलग-अलग नियम हैं। यह पुरानी ब्राउज़रों के साथ संगतता के लिए है जो फॉर्म फ़ील्ड को मूल रूप से देशी ओएस विगेट्स के साथ कार्यान्वित करने के लिए उपयोग किया जाता है, जो सीएसएस शैली नहीं बना सकता (और इसलिए जिसमें 'सीमा' या 'पैडिंग' नहीं थी)।

साइट स्टाइलशीट में अपना box-sizing/-moz-box-sizing/-webkit-box-sizing नियम क्यों न डालें? मेरे लिए काम करता है, मैं अक्सर इसका उपयोग आधुनिक ब्राउज़र में सेट चौड़ाई लाइन के साथ इनपुट करने के लिए करता हूं। (आईई 6-7 इसका समर्थन नहीं करते हैं, हालांकि, कुछ अतिरिक्त मदद की ज़रूरत है।)

+0

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

+0

खैर, उपयोगकर्ता एजेंट स्टाइलशीट को कभी भी समान होने की गारंटी नहीं दी जाती है, लेकिन फॉर्म फ़ील्ड प्रतिपादन विशेष रूप से भिन्न होता है क्योंकि अलग-अलग दृष्टिकोण ब्राउज़रों/ओएस के पास सीएसएस बनाम मूल ओएस थीमिंग के साथ स्टाइल फॉर्म की ओर होता है। – bobince

+0

हाय बॉबन्स - मैं सभी को अच्छी तरह से जानता हूं कि अलग-अलग ब्राउज़र और ओएस इन चीजों को अलग-अलग संभालते हैं। हम सभी को वेब डेवलपर्स, एलओएल के रूप में होना चाहिए। मेरी समस्या वास्तव में इसके साथ नहीं है, लेकिन अजीब व्यवहार के साथ मैं अनुभव कर रहा हूं कि छोटे छोटे परीक्षण पृष्ठों पर मुझे "सही" डिफ़ॉल्ट व्यवहार मिल रहा है जबकि मेरे आवेदन में इस विशेष पृष्ठ पर मुझे यह "गलत हो रहा है "डिफ़ॉल्ट व्यवहार। दूसरे शब्दों में, ब्राउज़र से ब्राउज़र में परिवर्तित होने वाले जीते गए डिफ़ॉल्ट कम से कम एक ब्राउज़र के भीतर सुसंगत होना चाहिए, लेकिन मैं इसे यहां नहीं देख रहा हूं। – natlee75

40

बस यही समस्या थी। मेरे मामले में क्या हो रहा था कि किसी ने <!doctype html> से ऊपर जावास्क्रिप्ट कोड का एक स्निपेट रखा था। नतीजतन, जब मैंने फायरबग के माध्यम से डोम का निरीक्षण किया, तो ऐसा प्रतीत होता है कि दस्तावेज़ में एक डॉक्टरेट नहीं था।

no-doctype

जब मैं जे एस कोड का स्निपेट ऐसी है कि doctype घोषणा फ़ाइल के शीर्ष पर था हटा दिया, doctype दोबारा प्रकट और बॉक्स आकार समस्याओं मैं देख रहा था (एक ही एक आप के लिए किया था तय)। देखें:

Has-doctype

आशा इस मदद करता है।doctype संपत्ति <!DOCTYPE html> नियम नहीं रह दिखाई दिया जोड़ने के बाद

input:not([type="image"]), textarea { 
    box-sizing: border-box; 
} 

:

+1

इसने मुझे बहुत समय बचाया, धन्यवाद –

+4

मेरे एचटीएमएल में '' जोड़ना इस मुद्दे को हल कर चुका है। – fguillen

+0

बहुत बहुत धन्यवाद, मुझे नहीं लगता था कि मुझे सीएसएस उपयोगकर्ता एजेंट कोड खोजकर कुछ भी मिलेगा जो जोड़ा जाता है। –

5

मैं जो डिफ़ॉल्ट रूप से निम्न उपयोगकर्ता एजेंट शैली का नियम शामिल क्रोम पर एक ही मुद्दा था।

संबंधित मुद्दे

 संबंधित मुद्दे