X
點擊此處開啟此網站的行動版。

技術支援討論區

Border and Outline are overlapping

已張貼

In my MTML code I have in the style section

   .RB td  {outline:medium solid red;border:10px solid white;}

According to the definitions the outside of the table cell should be red and the inside should be white. However, the border seems to be on both sides of the outline. To see what is happening look at https://freedom-press-alliance.us/ For what it is worth, Edge has the same problem.

In my MTML code I have in the style section .RB td {outline:medium solid red;border:10px solid white;} According to the definitions the outside of the table cell should be red and the inside should be white. However, the border seems to be on both sides of the outline. To see what is happening look at https://freedom-press-alliance.us/ For what it is worth, Edge has the same problem.
引用

額外的系統細節

已安裝的外掛程式

  • Shockwave Flash 32.0 r0

應用程式

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:66.0) Gecko/20100101 Firefox/66.0

更多資訊

cor-el
  • Top 10 Contributor
  • Moderator
17516 個解決方法 158398 個答案
Try to ask advice at the Stack Overflow forum site. *https://stackoverflow.com/questions/ *https://support.mozilla.org/en-US/kb/where-go-developer-support
這篇文章有幫助嗎? 0
引用

提出問題者

Stack overflow is seldom useful. This is a case of the website not doing what the CSS documentation said it should. stack overflow is to help with HTML, CSS, JAVASCRIPT coding errors, not browser errors. PS. I need my email address changed to hmorris@southwest.tn.edu

Stack overflow is seldom useful. This is a case of the website not doing what the CSS documentation said it should. stack overflow is to help with HTML, CSS, JAVASCRIPT coding errors, not browser errors. PS. I need my email address changed to hmorris@southwest.tn.edu
這篇文章有幫助嗎?
引用
jscher2000
  • Top 10 Contributor
8757 個解決方法 71653 個答案

The outline isn't allocated it's own space (see outline on MDN). In this case, it is being drawn "in" the border.

Col_Boogie said

Stack overflow is seldom useful.

Oh, I don't know, I picked up a trick there:

.RB td {
  border:4px solid red;
  position:relative;
}
/* Generated content trick */
.RB td:before {
  border:6px solid white; 
  position:absolute; display:block; content:''; left: 1px; top:1px;
  height:100%; width:100%; 
  box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;
}
.RB td a {
  margin:6px;
}
The outline isn't allocated it's own space (see [https://developer.mozilla.org/docs/Web/CSS/outline outline on MDN]). In this case, it is being drawn "in" the border. ''Col_Boogie [[#answer-1225346|said]]'' <blockquote> Stack overflow is seldom useful. </blockquote> Oh, I don't know, I picked up a trick there: <pre>.RB td { border:4px solid red; position:relative; } /* Generated content trick */ .RB td:before { border:6px solid white; position:absolute; display:block; content:<nowiki>''</nowiki>; left: 1px; top:1px; height:100%; width:100%; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; } .RB td a { margin:6px; } </pre>
這篇文章有幫助嗎?
引用
jscher2000
  • Top 10 Contributor
8757 個解決方法 71653 個答案

Actually, hold on, that creates an attractive inner border but it blocks the link. Maybe you're stuck with one border color, or using a two-color border image.

Actually, hold on, that creates an attractive inner border but it blocks the link. Maybe you're stuck with one border color, or using a two-color border image.
這篇文章有幫助嗎? 0
引用
cor-el
  • Top 10 Contributor
  • Moderator
17516 個解決方法 158398 個答案
See also this example: *https://developer.mozilla.org/en-US/docs/Web/CSS/border#Example
這篇文章有幫助嗎? 0
引用
問個問題

如果您還沒有帳號,您必須先 登入您的帳號 來回覆文章。請 開始一個新問題