আমি কীভাবে সিএসএস ব্যবহার করে কোনও উপাদানটির অফসেট থেকে মুক্তি পাব?

Question 1

আইই 8 বিকাশকারী সরঞ্জামগুলি এটি আমাকে দেখায়:

অফসেট কোথা থেকে আসে?

এখন আমি নিশ্চিত যে আমার সমস্যাটি 12 টি অফসেট, তবে আমি কীভাবে এটি অপসারণ করব ? আমি কোনও সিএসএস অফসেট সম্পত্তি সম্পর্কিত কোনও উল্লেখ পাই না। মার্জিন ছাড়াও আমাদের কি অফসেট দরকার?

এটি প্রস্তুতকারী কোডগুলি এখানে রয়েছে:

 <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

Question 2

সেই অফসেটটি মূলত এক্স, ওয়াই অবস্থান যা ব্রাউজার তার অবস্থান সিএসএস অ্যাট্রিবিউটের ভিত্তিতে উপাদানটির জন্য গণনা করেছে। সুতরাং আপনি যদি <br>এটির আগে বা অন্য কোনও উপাদান রেখে দেন তবে এটি অফসেটটি পরিবর্তন করবে। উদাহরণস্বরূপ, আপনি এটিকে 0 দ্বারা সেট করতে পারেন:

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

বা

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

অতএব, আপনার পজিশনিং সমস্যাটি যেই হোক না কেন, অফসেটের সাথে অগত্যা কোনও সমস্যা নয়, যদিও আপনি সর্বদা শীর্ষ, বাম, ডান এবং নীচের বৈশিষ্ট্যগুলির সাথে খেলে এটি ঠিক করতে পারেন।

আপনার সমস্যা ব্রাউজার কি বেমানান?

Question 3

আমার জন্য, এটি vertical-align: baselineবনাম vertical-align: topযা শীর্ষ অফসেটের কারণ হয়ে উঠছিল।

সেট করার চেষ্টা করুন vertical-align: top

Question 4

দ্রুত ঠিক করা:

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

এটি সেই অফসেটগুলিকে ভারসাম্যপূর্ণ করে তুলবে, তবে সম্ভবত আপনার পুরো লেআউটটি একবার দেখে নেওয়া উচিত এবং কীভাবে অন্য বাক্সগুলির সাথে বাক্সটি ইন্টারঅ্যাক্ট করে।

পরিভাষা হিসাবে, left, right, topএবং bottomCSS এর দ্বারা অফসেট বৈশিষ্ট্য। এগুলিকে নির্দিষ্ট স্থানে ( অবস্থানের সাথে ব্যবহার করার সময় absoluteবা fixedঅবস্থানের ক্ষেত্রে) অবস্থান নির্ধারণের জন্য, বা তাদের ডিফল্ট অবস্থানের সাথে সম্পর্কিত করতে ( relativeঅবস্থানের সাথে ব্যবহার করার সময়) ব্যবহার করা হয় । অন্যদিকে মার্জিনগুলি বাক্সগুলির মধ্যে ফাঁকগুলি নির্দিষ্ট করে এবং সেগুলি কখনও কখনও ভেঙে যায়, তাই সেগুলি নির্ভরযোগ্যভাবে অফসেট হিসাবে ব্যবহার করা যায় না।

তবে মনে রাখবেন যে আপনার ক্ষেত্রে অফসেটটি সিএসএস অফসেট থেকে গণনা করা যাবে না (পুরোপুরি)।

Question 5

উপরের এবং বাম বৈশিষ্ট্যগুলিকে নেতিবাচক মানগুলিতে সেট করা ভাল কাজ হতে পারে না যদি আপনার সমস্যাটি কেবল আপনি কুইর্কস মোডে থাকেন। পৃষ্ঠাটি যদি কোনও <!DOCTYPE>ঘোষণা অনুপস্থিত থাকে তবে এটি ঘটতে পারে , এটি আইই 8-তে কুইর্কস মোডে রেন্ডার হতে পারে। আইই 8 বিকাশকারী সরঞ্জামগুলিতে, "ডকুমেন্ট মোড" এর অধীনে "কুইর্কস মোড" নির্বাচন করা হয়নি তা নিশ্চিত করুন। যদি এটি নির্বাচিত হয় তবে আপনার উপযুক্ত <!DOCTYPE>ঘোষণাটি যুক্ত করতে হতে পারে ।

Question 6

আপনি যদি IE বিকাশকারী সরঞ্জামগুলি ব্যবহার করে থাকেন তবে নিশ্চিত হয়ে নিন যে আপনি দুর্ঘটনাক্রমে কোনও পুরানো সেটিংয়ে রেখে গেছেন না। আমি এই একই সমস্যাটির সাথে নিজেকে উন্মাদ করে দিচ্ছি যতক্ষণ না দেখলাম এটি ইন্টারনেট এক্সপ্লোরার 7 স্ট্যান্ডার্ডে সেট করা আছে। এটিকে ইন্টারনেট এক্সপ্লোরার 9 স্ট্যান্ডার্ড এবং সমস্ত কিছু ঠিক জায়গায় স্থান পেয়েছে।

Question 7

উপাদানটির শীর্ষস্থানীয়: -12px বা এটির অবস্থানটি সমস্যার সমাধান করে না তবে কেবল এটির মুখোশ ks

আমার একই সমস্যা ছিল - আপনার যদি একটি মোড়ানো উপাদান মিশ্রিত হয় কিনা তা পরীক্ষা করুন: অ-ভাসমান উপাদানগুলির সাথে ভাসমান উপাদানগুলি - আমার অ-ভাসমান উপাদানটি ভাসমানটির কাছে এই অদ্ভুত অফসেটকে ঘটিয়েছে

Question 8

মার্জিন নির্ধারণ করুন এবং উপাদানটির জন্য প্যাডিং সমস্যার সম্মুখীন হচ্ছে:

#element_id {margin: 0; padding: 0}

এবং দেখুন সমস্যা আছে কিনা। IE আরও অবাঞ্ছিত উত্তরাধিকারের সাথে পৃষ্ঠাটি রেন্ডার করে। আপনার এটি করা থেকে বিরত থাকা উচিত।

Question 9

এই অদ্ভুত বলে মনে হয়, কিন্তু আপনি সেটিং চেষ্টা করতে পারেন vertical-align: topমধ্যে CSSইনপুট জন্য। এটি অন্তত IE8 এ এটি স্থির করে।

Question 10

আমার .NET ভিত্তিক ওয়েবসাইটে আমার একই সমস্যা ছিল, ডটনেটনুক (ডিএনএন) এ চলছে এবং এটি আমার পক্ষে কী সমাধান করেছে তা মূলত ফর্ম ট্যাগটির একটি সহজ মার্জিন রিসেট ছিল। । নেট ভিত্তিক ওয়েবসাইটগুলি প্রায়শই একটি ফর্মের সাথে আবৃত থাকে এবং মার্জিনটি পুনরায় সেট না করে আপনি কখনও কখনও অদ্ভুত অফসেটটি উপস্থিত হতে পারেন, বেশিরভাগ ক্ষেত্রে যখন কিছু স্ক্রিপ্ট অন্তর্ভুক্ত থাকে।

সুতরাং আপনি যদি নিজের সাইটে এই সমস্যাটি সমাধান করার চেষ্টা করছেন, এটি আপনার সিএসএস ফাইলে প্রবেশ করার চেষ্টা করুন:

form {
  margin: 0;
}

Question 11

এই 'ডিফল্ট' থেকে মুক্তি পেতে আপনি একটি রিসেট সিএসএস প্রয়োগ করতে পারেন। এখানে একটি রিসেট সিএসএসের একটি উদাহরণ http://meyerweb.com/eric/tools/css/reset/ । আপনার নিজস্ব শৈলীর আগে পুনরায় সেট করা শৈলীগুলি প্রয়োগ করুন।

Question 12

আমারও একই সমস্যা ছিল। অফসেট আপডেটপ্যানেল রিফ্রেশের পরে উপস্থিত হয়েছিল। সমাধানটি হ'ল আপডেটপ্যানেলের আগে একটি ফাঁকা ট্যাগ যুক্ত করা:

<div></div>

...

Question 13

শুধু এর মত কারও জন্য রূপরেখা সেট করুন

[সনাক্তকারী] line রূপরেখা: কিছুই নয়; }

Question 14

আমার ক্ষেত্রে অফসেটটি একটি লি এর মধ্যে গ্রিড লেআউট সহ একটি কাস্টম উপাদানটিতে যুক্ত করা হয়েছিল যখন উল একটি উল্লম্ব ফ্লেক্সবক্স ছিল।

বেশ সহজ সমাধান হ'ল লাইকে ব্লক উপাদান হিসাবে সংজ্ঞায়িত করা

li {
 display: block;
}

আর অফসেট চলে গেল