ຕົວທ່ອງເວັບເວັບໄຊຕ໌ຂອງມື້ນີ້ໄດ້ມາເປັນວິທີທາງຍາວຈາກມື້ Crazy ບ່ອນທີ່ທຸກປະເພດຂອງຄວາມສອດຄ່ອງຂ້າມຂອງຕົວທ່ອງເວັບແມ່ນແນວຄິດທີ່ຕ້ອງການ. ຕົວທ່ອງເວັບເວັບໄຊຕ໌ໃນມື້ນີ້ແມ່ນທັງຫມົດມາດຕະຖານທີ່ສອດຄ່ອງກັນ. ພວກເຂົາເຈົ້າຫລິ້ນງາມຮ່ວມກັນແລະສະແດງການສະແດງຫນ້າທີ່ສອດຄ່ອງຕາມຫນ້າເວັບຕ່າງໆ. ນີ້ປະກອບມີຮຸ່ນຫລ້າສຸດຂອງ Google Chrome, Microsoft Edge, Mozilla Firefox, Opera, Safari ແລະຕົວທ່ອງເວັບຕ່າງໆທີ່ພົບໃນ ຫລາຍໆອຸປະກອນມືຖື ທີ່ໃຊ້ໃນການເຂົ້າເຖິງເວັບໄຊທ໌໌ໃນມື້ນີ້.
ໃນຂະນະທີ່ມີຄວາມຄືບຫນ້າແນ່ນອນກ່ຽວກັບຕົວທ່ອງເວັບຂອງເວັບໄຊຕ໌ແລະວິທີການທີ່ພວກເຂົາສະແດງ CSS, ຍັງມີຄວາມບໍ່ສອດຄ່ອງລະຫວ່າງທາງເລືອກຕ່າງໆຂອງຊອບແວເຫຼົ່ານີ້. ຫນຶ່ງໃນຄວາມບໍ່ສອດຄ່ອງທົ່ວໄປແມ່ນວິທີການທ່ອງເວັບເຫຼົ່ານີ້ຈະຄິດໄລ່ຂອບເຂດ, ການບິດເບືອນ, ແລະຂອບເຂດຕາມຄ່າເລີ່ມຕົ້ນ.
ເນື່ອງຈາກວ່າລັກສະນະຂອງຮູບແບບລຸ້ນນີ້ມີຜົນກະທົບທັງຫມົດຂອງ HTML ແລະເນື່ອງຈາກວ່າມັນມີຄວາມຈໍາເປັນໃນການສ້າງຮູບແບບຫນ້າ, ການສະແດງຜົນທີ່ບໍ່ສອດຄ່ອງຫມາຍຄວາມວ່າຫນ້າເວັບອາດຈະມີລັກສະນະທີ່ຍິ່ງໃຫຍ່ຢູ່ໃນຕົວທ່ອງເວັບ, ເພື່ອແກ້ໄຂບັນຫານີ້, ນັກອອກແບບເວັບຫຼາຍໆຄົນປະຕິບັດຕາມລັກສະນະຂອງຮູບແບບນີ້. ການປະຕິບັດນີ້ແມ່ນເປັນທີ່ຮູ້ຈັກກັນວ່າ "ສູນອອກແຮງງານ" ສໍາລັບຂອບ, ຂອບແລະຂອບ.
ຫມາຍເຫດກ່ຽວກັບຕົວທ່ອງເວັບ Defaults
ຕົວທ່ອງເວັບເວັບທັງຫມົດມີການຕັ້ງຄ່າເລີ່ມຕົ້ນສໍາລັບບາງຫນ້າຈໍສະແດງຜົນຂອງຫນ້າ. ຕົວຢ່າງ, hyperlinks ແມ່ນສີຟ້າແລະຖືກເນັ້ນຫນັກໃສ່ໃນຕອນຕົ້ນ. ນີ້ແມ່ນຄວາມສອດຄ່ອງໃນທົ່ວຕົວທ່ອງເວັບຕ່າງໆ, ແລະເຖິງແມ່ນວ່າມັນເປັນສິ່ງທີ່ນັກອອກແບບສ່ວນໃຫຍ່ປ່ຽນແປງເພື່ອໃຫ້ເຫມາະສົມກັບຄວາມຕ້ອງການຂອງໂຄງການຂອງແຕ່ລະໂຄງການ, ຄວາມຈິງທີ່ວ່າທຸກຄົນເລີ່ມຕົ້ນດ້ວຍຄ່າເລີ່ມຕົ້ນດຽວກັນເຮັດໃຫ້ການປ່ຽນແປງເຫຼົ່ານີ້ງ່າຍຂຶ້ນ. ຫນ້າເສຍດາຍ, ມູນຄ່າເລີ່ມຕົ້ນສໍາລັບການຂອບໃບ, padding, ແລະຂອບບໍ່ໄດ້ມີຄວາມສຸກໃນລະດັບດຽວກັນຂອງຄວາມສອດຄ່ອງຂອງຕົວທ່ອງເວັບຂ້າມ.
Normalizing Values for Margins and Padding
ວິທີທີ່ດີທີ່ສຸດໃນການແກ້ໄຂບັນຫາຂອງຮູບແບບກ່ອງບໍ່ສອດຄ່ອງແມ່ນການກໍານົດຄ່າ margins ແລະ padding ຂອງອົງປະກອບ HTML ທັງຫມົດເປັນສູນ. ມີວິທີການຈໍານວນຫນຶ່ງທີ່ທ່ານສາມາດເຮັດໄດ້ຄືການເພີ່ມກົດລະບຽບ CSS ນີ້ໃຫ້ກັບຄໍເຕົ້າໄຂ່ທີ່ທ່ານ:
* {margin: 0 padding: 0 }ລະຫັດ CSS ນີ້ໃຊ້ຕົວອັກສອນ * ຫຼືຕົວອັກສອນຕົວແທນ. ຕົວອັກສອນນັ້ນຫມາຍເຖິງ "ອົງປະກອບທັງຫມົດ" ແລະມັນຈະເລືອກເອົາທຸກໆເອກະສານ HTML ແລະກໍານົດຂອບແລະຂອບເຂດ 0. ເຖິງແມ່ນວ່າກົດລະບຽບນີ້ແມ່ນບໍ່ເປັນທີ່ຊັດເຈນເພາະວ່າມັນຢູ່ໃນຄໍເຕົ້າໄຂ່ທີ່ພາຍນອກຂອງທ່ານ, ມັນຈະມີຄວາມຊັດເຈນສູງກວ່າເບົາເຊີເບື້ອງຕົ້ນ values do ເນື່ອງຈາກຄ່າເລີ່ມຕົ້ນເຫຼົ່ານັ້ນແມ່ນສິ່ງທີ່ທ່ານກໍາລັງຂຽນລົງເທື່ອ, ແບບດຽວນີ້ຈະສໍາເລັດສິ່ງທີ່ທ່ານກໍານົດອອກມາ.
ຕົວເລືອກອື່ນແມ່ນການນໍາໃຊ້ຄ່າເຫຼົ່ານີ້ກັບ HTML ແລະອົງປະກອບຂອງຮ່າງກາຍ. ເນື່ອງຈາກວ່າທັງຫມົດຂອງອົງປະກອບອື່ນໆໃນຫນ້າເວັບຂອງທ່ານຈະເປັນເດັກນ້ອຍຂອງສອງອົງປະກອບເຫຼົ່ານີ້, CSS cascade ຄວນນໍາໃຊ້ຄ່າເຫຼົ່ານີ້ກັບທຸກໆອົງປະກອບອື່ນໆ.
html, body {margin: 0 padding: 0 }ນີ້ຈະເລີ່ມຕົ້ນການອອກແບບຂອງທ່ານຢູ່ໃນສະຖານທີ່ດຽວກັນກັບຕົວທ່ອງເວັບທັງຫມົດ, ແຕ່ສິ່ງຫນຶ່ງທີ່ຕ້ອງຈື່ແມ່ນວ່າເມື່ອທ່ານເປີດຂອບທັງຫມົດແລະ padding ອອກ, ທ່ານຈໍາເປັນຕ້ອງເລືອກເອົາຄືນໃຫ້ກັບຄືນໄປບ່ອນສໍາລັບບາງສ່ວນຂອງຫນ້າເວັບຂອງທ່ານເພື່ອໃຫ້ໄດ້ຮັບການເບິ່ງ ແລະຮູ້ສຶກວ່າການອອກແບບຂອງທ່ານຮຽກຮ້ອງໃຫ້.
ຊາຍແດນ
ທ່ານອາດຈະຄິດວ່າ "ແຕ່ບໍ່ມີຕົວທ່ອງເວັບທີ່ມີເສັ້ນຂອບອ້ອມຮອບອົງປະກອບຂອງຮ່າງກາຍໂດຍຄ່າເລີ່ມຕົ້ນ". ນີ້ບໍ່ແມ່ນຄວາມຈິງແທ້ໆ. ຮຸ່ນເກົ່າກວ່າຂອງ Internet Explorer ມີຊາຍແດນທີ່ມີຄວາມໂປ່ງໃສຫຼືເບິ່ງບໍ່ເຫັນເບິ່ງປະມານ. ເວັ້ນເສຍແຕ່ວ່າທ່ານກໍານົດຊາຍແດນເປັນ 0, ຊາຍແດນນັ້ນສາມາດຂັດຂວາງການຈັດຮູບແບບຂອງທ່ານ. ຖ້າທ່ານໄດ້ຕັດສິນໃຈວ່າທ່ານຈະສືບຕໍ່ສະຫນັບສະຫນູນສະບັບ IE ເຫຼົ່ານີ້, ທ່ານຈໍາເປັນຕ້ອງແກ້ໄຂບັນຫານີ້ໂດຍການເພີ່ມຕໍ່ໄປນີ້ຕໍ່ຮ່າງກາຍແລະ HTML ຂອງທ່ານ:
HTML, body {
margin: 0px
padding: 0px
border: 0px
}
ຄ້າຍຄືກັບວິທີທີ່ທ່ານປິດຂອບແລະ padding, ແບບໃຫມ່ນີ້ກໍ່ຈະປິດເສັ້ນຂອບແບບເລີ່ມຕົ້ນ. ນອກນັ້ນທ່ານຍັງສາມາດເຮັດສິ່ງດຽວກັນໄດ້ໂດຍໃຊ້ຕົວເລືອກຕົວແທນທີ່ສະແດງໃຫ້ເຫັນກ່ອນຫນ້າໃນບົດຄວາມ.
ບົດສະບັບຕົ້ນໂດຍ Jennifer Krynin. ດັດແກ້ໂດຍ Jeremy Girard ໃນວັນທີ 9/27/16.