زوايا مدورة على الحقول

Question

لقد لاحظت أن علامة "الحقلة" التي تجعل حدود ركنية مدورة على IE (يتم تربيعها على المتصفحات الأخرى).

<fieldset>
         <legend>My legend</legend>
</fieldset>

ولكن إذا قمت بتعيين نمط CSS على العقللة، فإن الزوايا الدائرية تختفي !!

أي شخص يعرف لماذا؟ كيفية الحفاظ على الزوايا الدائرية ولكن مع لون حدود آخر؟

عدل]: آسف على الارتباك، أنا لا أسأل كيف يكون لديك زوايا مستديرة على فايرفوكس / متصفحات أخرى، أريد أن أعرف كيفية الحفاظ على زوايا المسالك على أي ولها لون حدود آخر (لون الحدود: أحمر؛ على العقللة يغير جولات إلى المربعات ...).

Answer 1

تستخدم بعض العناصر (الأزرار وصناديق الإدخال) أنماط Visual System افتراضيا - وفي مواضيع Windows XP / Vista الافتراضية. (إلقاء نظرة على خصائص العرض، على سبيل المثال.)

إذا قمت بتعيين أي نمط إلى <input />, على سبيل المثال، سيفقد مؤثراته وتدراجيه وأشياء أخرى أيضا.

Answer 2

يحتوي هذا الموقع على إصلاح للقضايا المتعلقة بالقذات من الزوايا الدائرية و IE10. لا تزال هناك مشاكل في IE (وجه حزين). عليك أن تطفو عليه للعمل 100٪ من الوقت.

fieldset {
  margin: 20px;
  padding: 0 10px 10px;
  border: 1px solid #666;
  border-radius: 8px;
  box-shadow: 0 0 10px #666;
  padding-top: 10px;
}
legend {
  padding: 2px 4px;
  background: #fff;
  /* For better legibility against the box-shadow */
}
fieldset > legend {
  float: left;
  margin-top: -20px;
}
fieldset > legend + * {
  clear: both;
}

<fieldset>
  <legend>Legend</legend>
</fieldset>

http://www.456bereastree.com/archive302/fiandset_legend_bandder-radius_and_box-shadow/

Answer 3

لا يوجد سبب هذا، فليس من سر أن المتصفحات تتصرف بشكل مختلف.

هل استكشافت -MOZ-Border-Radius ينسب؟

أعتقد شيئا مثل

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}  

يعمل في فايرفوكس / موزيلا، لكنه كان وقتا طويلا منذ أن حاولت: د

Answer 4

الحدود الموجودة في IE ليست سوى 1) لديك "استخدام الأنماط البصرية على Windows على الأزرار" ممكنة بموجب الأداء | علامة التبويب المؤثرات المرئية. لوضعها حادة: إذا كان لديك "مظهري XP"، فسيتم تقريبه، عندما يكون لديك نظرة كلاسيكية WIN2000، لن يتم تقريبها.

الشرط الثاني 2) هو "لا CSS ذات الصلة الحدودية" للحقلة. كلما قمت بتعيين لون الحدود، أو نمط الحدود، أو عرض الحدود، فقد انتهى "التقريب"، لا يوجد حل بديل لذلك. الشيء نفسه ينطبق على المدخلات (كلا الأزرار والحقول)، مربع النص وحديد العلامات. كلما لم يجد أي CSS تحت عنوان التحكم في التجسيد، ستقوم بتطبيق "موضوع Windows الافتراضي" للتحكم.

Answer 5

يمكنك استخدام خاصية CSS 3 Border-Radius، والتي ستعمل على Firefox و Safari:

fieldset {
 -moz-border-radius: 5px;
 -webkit-border-radius: 5px;
}

Answer 6

http://www.webteacher.ws/20/2010/02/27/style-a-fieldset-/with-corners-using-css/

Answer 7

fieldset {   
  -moz-border-radius:5px;  
  border-radius: 5px;  
  -webkit-border-radius: 5px; //edit :D
}