Wydaje się, że za całe życie nie jestem w stanie dowiedzieć się, dlaczego, po najechaniu kursorem na zakładkę, wydaje się, że pojawia się ten nieznośny wynik końcowy 1px. W tym przykładzie użyłem farby MS, aby pokolorować ją na czerwono w celach identyfikacyjnych. Czy jest jakiś sposób, aby to naprawić lub usunąć?

Przeglądarką renderującą jest MS Edge.

Oto zdjęcie problemu: tu wpisz opis obrazu

 h1 {
   padding: 100px 0;
   font-weight: 400;
   text-align: center;
 }

 p {
   margin: 0 0 20px;
   line-height: 1.5;
 }

 .main {
   margin: 0 auto;
   min-width: 320px;
   max-width: 800px;
 }

 .content {
   background: #fff;
   border: 1px solid rgb(97, 97, 97);
 }

 .content>div {
   display: none;
   padding: 20px 25px 5px;
 }

 input {
   display: none;
 }

 label {
   display: inline-block;
   padding: 15px 25px;
   font-weight: bold;
   text-align: center;
   color: rgb(97, 97, 97);
 }

 label:hover {
   color: #000;
   cursor: pointer;
 }

 input:checked+label {
   background: #ccc;
   color: #000;
   border-top: 1px solid rgb(97, 97, 97);
   border-left: 1px solid rgb(97, 97, 97);
   border-right: 1px solid rgb(97, 97, 97);
   position: relative;
 }

 input:checked+label::before {
   position: absolute;
   width: 100%;
   height: 1px;
   background: #ccc;
   bottom: -1px;
   right: 0;
   left: 0;
   margin: auto;
   content: '';
 }

 #tab1:checked~.content #content1,
 #tab2:checked~.content #content2,
 #tab3:checked~.content #content3,
 #tab4:checked~.content #content4 {
   display: block;
 }

 @media screen and (max-width: 400px) {
   label {
     padding: 15x 10px;
   }
 }
 <div class="main">

   <input id="tab1" type="radio" name="tabs" checked>
   <label for="tab1">Workspace Info</label>

   <input id="tab2" type="radio" name="tabs">
   <label for="tab2">Employee Info</label>

   <input id="tab3" type="radio" name="tabs">
   <label for="tab3">Service Requests</label>

   <div class="content">
     <div id="content1">
       <p>
         New York – referred to as New York City or the City of New York to distinguish it from the State of New York, of which it is a part – is the most populous city in the United States and the center of the New York metropolitan area, the premier gateway
         for legal immigration to the United States and one of the most populous urban agglomerations in the world. A global power city, New York exerts a significant impact upon commerce, finance, media, art, fashion, research, technology, education,
         and entertainment.
       </p>
       <p>
         Home to the headquarters of the United Nations, New York is an important center for international diplomacy and has been described as the cultural and financial capital of the world.
       </p>
     </div>

     <div id="content2">
       <p>
         London is the capital city of England and the United Kingdom. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants. Standing on the River Thames, London has been a major settlement for two millennia,
         its history going back to its founding by the Romans, who named it Londinium.
       </p>
       <p>
         London's ancient core, the City of London, largely retains its 1.12-square-mile (2.9 km2) mediaeval boundaries and in 2011 had a resident population of 7,375, making it the smallest city in England. Since at least the 19th century, the term London has
         also referred to the metropolis developed around this core.
       </p>
     </div>

     <div id="content3">
       <p>
         Mumbai is the capital city of the Indian state of Maharashtra. It is the most populous city in India, most populous metropolitan area in India, and the eighth most populous city in the world, with an estimated city population of 18.4 million and metropolitan
         area population of 20.7 million as of 2011. Along with the urban areas, including the cities of Navi Mumbai, Thane, Bhiwandi, Kalyan, it is one of the most populous urban regions in the world.
       </p>
       <p>
         Mumbai lies on the west coast of India and has a deep natural harbour. In 2009, Mumbai was named an alpha world city. It is also the wealthiest city in India, and has the highest GDP of any city in South, West or Central Asia.
       </p>
     </div>

   </div>

 </div>
0
Jason Kelly 8 listopad 2019, 19:54
1
Podaj prosty i powtarzalny przykład. stackoverflow.com/help/minimal-reproductible-example
 – 
robinvrd
8 listopad 2019, 20:00
Wejście sprawdzane wcześniej ma dół -1px
 – 
Madhuchhanda Mandal
8 listopad 2019, 20:02
1
Twój kod wydaje się być w porządku. Próbowałem go na Chrome i Edge bez żadnych problemów.
 – 
Kalimah
8 listopad 2019, 20:04
Madhuchhanda nadal nie ma różnicy, jeśli zostanie usunięty.
 – 
Jason Kelly
8 listopad 2019, 20:04
Mogę dodać kolor bg ciała i nie widzę miejsca, które pokazuje twój obraz i wygląda dobrze. Czy to jest w konkretnej przeglądarce, czy coś?
 – 
Chris W.
8 listopad 2019, 20:33

2 odpowiedzi

label {
    display: inline-block;
    padding: 15px 25px;
    font-weight: bold;
    text-align: center;
    color: rgb(97, 97, 97);
    background: rgb(222,222,222); <-- Add this to your foreground background color
}
0
Jason Kelly 8 listopad 2019, 21:13
Opisz w swojej odpowiedzi, na czym polegał problem i jak ten fragment pomoże go rozwiązać, aby pomóc innym zrozumieć tę odpowiedź
 – 
FZs
9 listopad 2019, 00:29

Kod działa dobrze w Mozilli, Chrome i Edge. Ale sugeruję dodanie właściwości text-decoration: none do etykiety: hover. CSS wygląda następująco:

label:hover,
label:active,
label:focus{color: #000;cursor: pointer;text-decoration:none;}

Dziękuję Ci.

0
htmldevmate 8 listopad 2019, 21:13