Кнопки JavaFX имеют раздражающие пробелы вокруг них

Question

Я настроил кнопку JavaFX для изменения цвета при нажатии с использованием псевдокласса CSS (.button: нажатая).Однако, хотя кнопка меняет цвет, между верхней частью кнопки и границей кнопки все еще виден небольшой разрыв старого цвета.Это изображение иллюстрирует проблему - между нажатыми кнопками и верхней границей кнопки есть небольшая полоска светло-серого цвета проблема

Как это исправить?

РЕДАКТИРОВАТЬ:Когда я изменяю ширину границы для каждой кнопки, проблема становится более отчетливой.Вокруг каждой кнопки есть промежутки, и когда кнопка имеет фокус (был нажат последним), зазор нижней границы заполняется - на этом рисунке номер 8. проблема

package calculator;

import java.util.ArrayList;
import java.util.List;
import javafx.application.*;
import static javafx.application.Application.launch;
import javafx.geometry.*;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.stage.*;

public class Calculator extends Application {

    private static int appWidth = 230*3;
    private static int appHeight = 300*3;
    private static int numRows = 7;
    private static int numCols = 8;
    List<Button> buttonList = new ArrayList();

    public static void main(String[] args) {
        launch(args);
    }

    @Override
    public void start(Stage primaryStage) throws Exception {
//Create 0-9 buttons 
        for (int i = 0; i < 10; i++) {
            Button tempButton = new Button(Integer.toString(i));
            tempButton.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
            HBox.setHgrow(tempButton, Priority.ALWAYS);
            VBox.setVgrow(tempButton, Priority.ALWAYS);
            buttonList.add(tempButton);
        }

//Point button 
        //point button 
        Button point = new Button(".");
        point.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Plus, plys, minus, multiply, and divide buttons 
        Button equals = new Button("=");
        equals.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        equals.getStyleClass().add("button-special");

        Button plus = new Button("+");
        plus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        plus.getStyleClass().add("button-special");

        Button minus = new Button("-");
        minus.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        minus.getStyleClass().add("button-special");

        Button multiply = new Button("x");
        multiply.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        multiply.getStyleClass().add("button-special");

        Button divide = new Button("/");
        divide.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        divide.getStyleClass().add("button-special");

//Clear and delete buttons 
        Button clear = new Button("C");
        clear.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        Button del = new Button("Del");
        del.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Screen s 
        Label screen = new Label("0");
        screen.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);
        screen.setAlignment(Pos.CENTER_RIGHT);

//Create GridPane 
        GridPane grid = new GridPane();
        grid.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE);

//Add nodes to grid pane 
        grid.add(buttonList.get(0), 0, 6, 4, 1);
        grid.add(point, 4, 6, 2, 1);

        grid.add(buttonList.get(1), 0, 5, 2, 1);
        grid.add(buttonList.get(2), 2, 5, 2, 1);
        grid.add(buttonList.get(3), 4, 5, 2, 1);

        grid.add(buttonList.get(4), 0, 4, 2, 1);
        grid.add(buttonList.get(5), 2, 4, 2, 1);
        grid.add(buttonList.get(6), 4, 4, 2, 1);

        grid.add(buttonList.get(7), 0, 3, 2, 1);
        grid.add(buttonList.get(8), 2, 3, 2, 1);
        grid.add(buttonList.get(9), 4, 3, 2, 1);

        grid.add(equals, 6, 6, 2, 1);
        grid.add(plus, 6, 5, 2, 1);
        grid.add(minus, 6, 4, 2, 1);
        grid.add(multiply, 6, 3, 2, 1);
        grid.add(divide, 6, 2, 2, 1);

        grid.add(clear, 0, 2, 3, 1);
        grid.add(del, 3, 2, 3, 1);

//Set row and column constraints 
        for (int rowIndex = 0; rowIndex < Calculator.numRows; rowIndex++) {
            RowConstraints rc = new RowConstraints();
            rc.setVgrow(Priority.ALWAYS);
            rc.setFillHeight(true);
            rc.setPercentHeight(Calculator.appHeight / Calculator.numRows);
            grid.getRowConstraints().add(rc);
        }

        for (int colIndex = 0; colIndex < Calculator.numCols; colIndex++) {
            ColumnConstraints cc = new ColumnConstraints();
            cc.setHgrow(Priority.ALWAYS);
            cc.setFillWidth(true);
            cc.setPercentWidth(Calculator.appWidth / Calculator.numCols);
            grid.getColumnConstraints().add(cc);
        }

// Create the scene and the stage 
        Scene scene = new Scene(grid, appWidth, appHeight);
        scene.getStylesheets().add("Simple.css");

        primaryStage.setScene(scene);
        //primaryStage.setTitle("Calculator");
        primaryStage.setResizable(false);
        primaryStage.show();

    }

}

Вот CSS:

.root
{
    -fx-font-size: 15pt;

}

.button
{
    -fx-background-radius: 0;
    -fx-border-style: solid;
    -fx-border-color: gray;
    -fx-border-width: .3;
    -fx-background-color: #E0E0E0;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

}

.button:pressed
{
    -fx-background-color: #B2B2B2;
    -fx-background-insets: 0 0 -1 0, 0, 1, 2;

}

.button-special
{
    -fx-background-color: #EA9747;
    -fx-text-fill: white;
    -fx-font-size: 17pt;

}

.button-special:pressed
{
    -fx-background-color: #bb8738;
    -fx-text-fill: #555555;
    -fx-border-color: gray;

}

.button-top
{

}

Answer 1

Я нашел ответ. Мне пришлось добавить конкретные стили фона и границы:

-fx-border-width: 0 1 1 0;
-fx-background-insets: 0,1,1;
-fx-background-radius: 0;